深圳幻海软件技术有限公司 欢迎您!

  • 巧用视觉障眼法,还原 3D 文字特效

    最近群里有这样一个有意思的问题,大家在讨论,使用CSS3D能否实现如下所示的效果:这里的核心难点在于,如何利用CSS实现一个立体的数字?CSS能做到吗?不是特别好实现,但是,如果仅仅只是在一定角度内,利用视觉障眼法,我们还是可以比较完美的还原上述效果的。利用距离、角度及光影构建不一样的3D效果这是一

  • 记录--记一次前端CSS升级

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助目前平台前端使用的是原生CSS+BEM命名,在多人协作的模式下,容易出现样式冲突。为了减少这一类的问题,提升研效,我调研了业界上主流的7种CSS解决方案,并将最终升级方案落地到了工程中。样式冲突的原因目前遇到的样式冲突的原因,其实根本原因还

  • 开发者注意了,WebKit迎来新升级!

    导读目前,在两大主流移动智能操作系统iOS和Android上,默认的浏览器内核都是WebKit,而且分别以Framework的方式推出了UIWebKit和WebView组件,使得第三方开发者可以据此构建自己的浏览器或使用Web技术展现内容的各种复杂应用。近日,Safari15.4为WebKit添加了

  • 聊聊 Css 样式中的颜色格式

    颜色对于css来说是非常重要的,网站之所以会呈现出五彩斑斓的样式,就是这些颜色样式起的作用。在css中,对于颜色样式有很多种表达方式,今天我们就来盘点下css中颜色的格式。名字颜色在css中,默认定义了很多名字颜色,比较常见的比如yellow,blue,red,pink等,实际上,css中一共定义了

  • Amazing!巧妙构建页面结构的 3D Visualization

    对Chrome扩展功能熟悉的小伙伴,可能都有用过Chrome的3D展示页面层级关系这个功能。可以通过 控制台-->右边的三个小点-->MoreTools-->Layers 打开。即可以看到页面的一个3D层级关系,像是这样:这个功能有几个不错的作用:页面层级概览。

  • Css Grid 布局那些事儿

    CSSGrid是一种为Web开发创建网站布局的方式。它已经存在了很多年,随着更多浏览器的支持,它终于变得越来越流行。接下来我们将了解下CSSGrid及其工作原理。了解下如何使用它。CSS网格简介随着布局系统的不断发展,CSS也取得了长足的进步。随着CSSGrid的发布,我们终于有了一个强大的工具来创

  • 神奇!探究混合模式\滤镜导致 3D 失效问题

    之前在写一个小的CSSDemo,一个关于3d球的旋转动画,关于CSS3D,少不了会使用下面这几个属性:复制{transform-style:preserve-3d;perspective:1000;transform:translate3d();}1.2.3.4.5.这个Demo你可以戳这里,大概是

  • CSS 伪类没有生效?探索 content 属性!

    ​问题问题就是CSS伪类没有生效,具体表现如下,可见 demo[1]:复制<spanclass="desc">我是Gopal。</span1.2.3.复制.desc{display:block;font-size:30px;color:#000;}.desc:before

  • 手写 Css-Modules 来深入理解它的原理

    我们知道,浏览器里的JS之前没有模块的概念,都是通过不同的全局变量(命名空间)来隔离,后来出现了AMD、CMD、CommonJS、ESM等规范。通过这些模块规范组织的JS代码经过编译打包之后,运行时依然会有模块级别的作用域隔离(通过函数作用域来实现的)。组件就可以放在不同的模块中,来实现不同组件的J

  • 都 2022 年了,手动搭建 React 开发环境很难吗?

    工厂流水线生产的东西用久了,总想着自己手工是否也能做出来,就如同工艺品和艺术品一般,虽然效果相似,但艺术品往往比工艺品更有韵味。作为一名前端工程师,总是用一些脚手架来快速搭建新项目的基本结构,因此今天尝试着一步步搭建一个React的项目环境,看看需要处理哪些问题,查漏补缺!一、需求分析 首

  • 如何写出更优雅的CSS代码?

    CSS(全称CascadingStyleSheets,层叠样式表)为开发人员提供声明式的样式语言,是前端必备的技能之一。基于互联网上全面的资料和简单易懂的语法,CSS非常易于学习,但其知识点广泛且分散,很难做到精通。在我们日常开发中,受限于原代码混乱、DDL将近等问题,常常忽视了CSS代码的质量,很

  • 2022年你不应该错过的CSS新特性

    对于CSS来说,2022年是非常值得期待的一年,大量的新功能即将出现,有些已经开始登录浏览器,有些可能会在2022年获得浏览器的广泛支持。下面就来看看2022年有哪些值得期待的CSS新特性吧!一、容器查询1.基本概念容器查询使我们能够根据其父元素的大小设置元素的样式,它类似于@media查询,不同之

  • Chrome 99新特性:@layers 规则浅析

    背景CSS写多了,就会觉得它不太好用,经常会遇到各种问题...比如:「引入顺序导致的样式竞争问题」用过antdesign等组件库+发布在npm上的业务组件的同学,可能会经常遇到自定义样式不生效的问题,比如像这样...复制/*main.module.css*/.green{color:green;}1

  • 使用 CSS 轻松构建高级感拉满的磨砂玻璃渐变背景

    最近,我们内部的一个低代码平台完工上线,它的首页大概是这样子(数据脱敏):当然,这个不是项目不是本文的重点。主要看看这个页面的背景,一个磨砂(毛玻璃)质感效果的渐变背景图,看上去是比较高级的。剥离掉页面的内容元素,只剩下背景的话,大概是这样:一开始是打算切图实现的,但是仔细一想,这个效果使用CSS其

  • 前端: 如何更高效的学习Css? 有哪些库值得推荐?

    如何高效学习Css之前在工作中也使用css做过很多有意思的事情,比如用css画图标,写轮播图,写动效,做布局等等,但是这些应用的实现都依赖于html和css基础知识.根据我自己的学习经验,我们需要掌握如下基础知识:Css基本语法结构和属性设置Css盒模型Css定位方式Css布局CssBFC(块级格式

  • Web程序员必备!这8种CSS工具快收藏好

    本文转载自公众号“读芯术”(ID:AI_Discovery)作为web开发人员,CSS工具是必须掌握的。但是如果没有遵从正确的学习流程,你可能很难理解CSS的操作。这也是一些开发者对其不甚明了的原因。本文将通过两种方式助你学习CSS:一是借助专用工具对CSS进行编码,二是通过一些交互环境学习CSS。

  • Web前端开发必不可少的9个开源框架

    大多数人想到Web开发时,通常会想到HTML或JavaScript,往往忽略了CSS,根据Wikipedia的说法,CSS既是网页中最重要也是最常被遗忘的部分之一,尽管它是万维网的三大基础技术之一。今天就和大家分享9个流行的、强大的前端开源框架,帮助你轻松构建漂亮的网站前端。1.BootstrapB

  • 代码变油画,精细到毛发,前端小姐姐只用HTML+CSS,让美术也惊叹

    本文经AI新媒体量子位(公众号ID:QbitAI)授权转载,转载请联系出处。HTML不是编程语言,但这并不妨碍精通它的大佬玩出花来。普通的前端,用HTML+CSS制作网页,元素简单,工具丰富。大佬级前端,用HTML+CSS绘画,全程不用PS、AI这种图形化的图片编辑器,单纯敲一行行代码纯手工绘制。把

  • 2020 年你应该知道的 React 库

     React已经诞生很久了,自从它诞生开始,围绕组件驱动形成了一个非常全面的生态,但是来自其他编程语言或者框架的开发人员很难找到要构建一个React系统的所有组件。如果你是来自于像Angular这样的框架的开发者,你可能已经习惯了框架包含了所需要的所有功能,然而对于React来说,它的核心

  • 13个帮你提高开发效率的现代CSS框架

     本文将向你介绍一系列***CSS框架。有些人可能听说过,也可能对有些人是全新的。但它们都提供了各种有用的先进功能,可以改善你的工作流程。开始吧!专注于CSS的框架让我们先从一些专注于CSS的框架开始。你将找到所有类型的布局和UI元素来自己构建项目的基础。有些甚至可能包含一些JavaScr

推荐阅读