Coco
本文将介绍巧用模糊实现视觉 3D 效果的技巧。 我们都知道，在正常的视觉效果中，离我们越近的通常我们会看的越清晰，而离我们较远则相对没那么清晰~ 我们可以利用**清晰**与**模糊**两种状态来构建视差效果。像是这样：  而在 CSS 中，我们可以利用模糊滤镜 `filter: blur()` 与 `transform-style: preserve-3d` 来实现它们。 ## 实现一个文字的 3D 变换 首先，我们需要实现一个文字的 3D 变换，这个比较简单。主要是借助 `transform-style: preserve-3d` 和 `perspective`，以及让文字绕 Y 轴进行旋转即可。 简单的代码如下： ```HTML...
本文利用 CSS @property 来实现一些有意思的（但可能毫无卵用）事情。 ## 渐变动画的历史 我们都知道，在之前，我们想实现渐变的动画，其实是非常复杂甚至是做不到的。 例如，从下图 A 状态，到 B 状态： ```HTML ``` ```CSS div { width: 300px; height: 150px; animation: gradientChange 5s infinite linear; } @keyframes gradientChange {...
本文将带大家简单实现一个会动的鸿蒙 LOGO。 emmm，写本文的动机是之前在掘金看到一篇实现鸿蒙 LOGO 的文章 -- [产品经理：鸿蒙那个开场动画挺帅的 给咱们页面也整一个呗](https://juejin.cn/post/6979042510400126983) 鸿蒙的 LOGO 本身是这样的：  该篇作者最终实现的是一个字母 O 的动画展开过程：  而本文想尝试的，是该 LOGO 的其他一些细节，核心是倒影部分的水波效果。 ## 实现主体 首先，我们需要对该结构进行简单的一个拆解，因为上下部分的较大差异，虽然是一个圆，但是很明显需要分成两块处理，这部分比较简单且不是重点，我就略过分享，直接上代码。 我们的结构大致如下： ```HTML ``` ```CSS @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;1,200&display=swap'); .g-container {...
本文将介绍一个小技巧，通过混合模式 `mix-blend-mode` 巧妙的实现文字的镂空波浪效果。 ## 起因 一日，一群友私聊问我。如何使用 CSS 实现下述效果，一个文字的波浪效果：  我当时想都没想，就回答道，这个很简单啊。  熟练的打开 CodePen，一顿操作，卧槽，好像事情没有那么简单。想要用纯 CSS 实现起来非常的棘手。 ## 纯 CSS 实现波浪效果 在进入正题前，我们先复习下，使用 CSS 实现波浪，如果不是在镂空的文字内，而是在一个 `div` 容器内，可以使用滚动大圆的方式，类似于这样：  容器应用 `overflow: hidden`，就能得到这样的效果：  对这个技巧还不理解，可以猛击这篇文章：[纯...
本文将介绍一种利用 CSS 滤镜 filter 的 `drop-shadow()`，实现对 HTML 元素及 SVG 元素的部分添加阴影效果，以实现一种酷炫的光影效果，用于各种不同的场景之中。通过本文，你可以学到： 1. 如何利用 `filter: drop-shadow()` 对元素的部分内容添加单重及多重阴影，以及利用多重阴影实现 Neon 效果 2. HTML 元素配合 `filter: drop-shadow()` 以及 SVG 元素配合 `filter: drop-shadow()` 生成的光影效果 ## 使用...
到国庆了，大家都急着给祖国母亲庆生。 每年每到此时，微信朋友圈就会流行起给头像装饰上国旗，而今年又流行这款：  emm，很不错。 那么，将一张国旗图片与我们的头像，快速得到想要的头像，使用 CSS 如何简单实现呢？ 有人认为是改变其中一张图的透明度，实际上不是的。仔细观察合成后的头像，最左边的基本上只能看到红旗看不到原本的头像内容，而最右边基本只能看到头像而不再显示红旗的红色背景。 ## 在 CSS 中使用 mask 遮罩，一行代码实现头像与国旗的融合 在 CSS 中，我们仅仅需要将两张图片叠加在一起，对上层的图片使用 mask 属性，一行代码即可实现该效果。 ```HTML ``` ```CSS div { position: relative; margin: auto; width: 200px;...
本文将向大家介绍 Chrome 87 开始支持的 CSS Overview Panel，并且介绍如何更好地利用这个面板。通过 CSS Overview Panel，可能可以帮助我们： 1. 更准确（高保真）的**还原设计稿**，辅助设计走查环节 2. 更好的**精简我们的 CSS 代码** 3. 辅助进行网站的**可访问性提升** 4. 对网站样式的整体概况有更清晰的认识 ## 什么是 CSS Overview Panel CSS Overview Panel 直译过来就是 CSS...
本文将通过一个实际的业务需求，讲解如何实现 1. 极端场景下文字加粗加边框效果 2. 文字多重边框的效果 ## 需求背景 - 文字的二次加粗 今天遇到这样一个有意思的问题： 1. 在文字展示的时候，利用了 `font-weight: bold` 给文字进行加粗，但是觉得还是不够粗，有什么办法能够让文字更粗一点呢？ emm，不考虑兼容性的话，答案是可以利用文字的 `-webkit-text-stroke` 属性，给文字二次加粗。 [MDN - webkit-text-stroke]()： 该属性为文本字符添加了一个边框（笔锋），指定了边框的**宽**和**颜色**， 它是 `-webkit-text-stroke-width` 和 `-webkit-text-stroke-color` 属性的缩写。 看下面的 DEMO，我们可以利用 `-webkit-text-stroke`，给文字二次加粗：...
本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式，通过本文，你可能可以学会： + 通过 HTML 标签 `` 创建进度条 + 通过 HTML 标签 `` 创建进度条 + HTML 实现进度条的局限性 + 使用 CSS 百分比、渐变创建普通进度条及其动画 + 使用 CSS 创建圆环形进度条 + 使用 CSS 创建球形进度条...
本文将深入探讨在 CSS 中两个非常类似的属性 -- `filter` 和 `backdrop-filter`。它们都能完成某些滤镜功能，但是它们肯定也存在差异。那么，为什么在 CSS 中有了 `filter` 还诞生了 `backdrop-filter` 了？ 带着这个疑问，开始今天的正文。 ## `filter` VS `backdrop-filter` 在 CSS 中，有两个和滤镜相关的属性 -- `filter` 和 `backdrop-filter`。 > [backdrop-filter](https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty) 是更为新的规范推出的新属性，可以点击查看 Filter Effects...