随笔分类 - CSS进阶
摘要：最近，我们内部的一个低代码平台完工上线，它的首页大概是这样子（数据脱敏）： 当然，这个不是项目不是本文的重点。主要看看这个页面的背景，一个磨砂（毛玻璃）质感效果的渐变背景图，看上去是比较高级的。 剥离掉页面的内容元素，只剩下背景的话，大概是这样： 一开始是打算切图实现的，但是仔细一想，这个效果使用
阅读全文
摘要：有群友问我，使用 CSS 如何实现如下 Loading 效果： 这是一个非常有意思的问题。 我们知道，使用 CSS，我们可以非常轻松的实现这样一个动画效果： <div></div> div { width: 100px; height: 100px; border-radius: 50%; bord
阅读全文
摘要：本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。 CSS 动画介绍及语法 首先，我们来简单介绍一下 CSS 动画。 最新版本的 CSS 动画由规范 -- CSS Animations Level 1 定义。 CS
阅读全文
摘要：背景 某日，群友们在群里抛出这样一个问题，如何使用 CSS 实现如下的布局： 在 CSS 世界中，如果只是下述这种效果，还是非常容易实现的： 一旦涉及到圆角或者波浪效果，难度就会提升很多。 实现这种连续平滑的曲线其实是比较麻烦的，当然，也不是完全没有办法。本文，就会带大家看看，使用 CSS 实现上述
阅读全文
摘要：最近利用 CSS 实现了一些看似超出 CSS 能力的效果： 巧用渐变实现高级感拉满的背景光动画 Amazing！！CSS 也能实现极光？ 本文继续此系列，本文主要想探讨一下，使用 CSS 能否比较好的实现一些烟雾效果。像是这样： 仔细观察烟雾效果，有两个比较重要的特点： 模糊效果 颗粒感 首先看模糊
阅读全文
摘要：在上次写完这篇文章 -- 巧用渐变实现高级感拉满的背景光动画 之后，文章下面的评论有同学留言，使用 CSS 可以实现极光吗？ 像是这样： emmm，这有点难为人了。不过，最近我也尝试着去试了下，虽然不可能模拟出那么真实的效果，但是使用 CSS 还是可以作出类似的一些特效的，今天我们就一起来尝试下。
阅读全文
摘要：背景 今天逛 CodePen，看到了这样一个非常有意思的效果： CodePen Demo -- Material Design Menu By Bennett Feely 这个效果还是有一些值得探讨学习的点，下面我们一起来看看。 如何实现这样一个类似的效果？ 首先，想一想，如果让你去实现上面的效果，
阅读全文
摘要：背景 在群里会有同学问相关的问题，怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢？ 本文基于一些高频出现在设计稿中的，使用 CSS 实现稍微有点难度和技巧性的按钮，讲解使用 CSS 如何尽可能的实现它们。 先让我们来看看这些经常会出现的按钮形状： 矩形与圆角按钮 正常而言，我
阅读全文
摘要：背景 在上一篇 巧用滤镜实现高级感拉满的文字快闪切换效果 中，我们提到了一种非常有意思的之前苹果展示文字的动画效果。 本文，会带来另外一个有意思的效果，巧用渐变实现高级感拉满的背景光动画。此效果运用在苹果官网 iPhone 13 Pro 的介绍页中： 实现 这个效果想利用 CSS 完全复制是比较困难
阅读全文
摘要：今天偶然看到这样一类很有意思的文字快闪动画： 这类文字快闪切换效果运用得当的话，能比较好的吸引用户的眼球。 当然，今天并非是想用 CSS 实现上述的的效果。在尝试的过程中，我发现了另外一类能够使用 CSS 非常轻松实现文字快闪动画，运用了blur() 滤镜和 contrast() 滤镜产生的融合效果
阅读全文
摘要：背景 周末在家习惯性登陆 Apex，准备玩几盘。在登陆加速器的过程中，发现加速器到期了。 我一直用的腾讯网游加速器，然而点击充值按钮，提示最近客户端升级改造，暂不支持充值（这个操作把我震惊了~）。只能转头下载网易 UU 加速器。 打开 UU 加速器首页，映入眼帘的是这样一幅画面： 瞬间，被它这个背景
阅读全文
摘要：本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式，通过本文，你可能可以学会： 通过 HTML 标签 <meter> 创建进度条 通过 HTML 标签 <progress> 创建进度条 HTML 实现进度条的局限性 使用 CSS 百分比、渐变创建普通进度条及其动画 使
阅读全文
摘要：本文将通过一个实际的业务需求，讲解如何实现 极端场景下文字加粗加边框效果 文字多重边框的效果 需求背景 - 文字的二次加粗 今天遇到这样一个有意思的问题： 在文字展示的时候，利用了 font-weight: bold 给文字进行加粗，但是觉得还是不够粗，有什么办法能够让文字更粗一点呢？ emm，不考
阅读全文
摘要：本文将向大家介绍 Chrome 87 开始支持的 CSS Overview Panel，并且介绍如何更好地利用这个面板。通过 CSS Overview Panel，可能可以帮助我们： 更准确（高保真）的还原设计稿，辅助设计走查环节 更好的精简我们的 CSS 代码 辅助进行网站的可访问性提升 对网站样
阅读全文
摘要：本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow()，实现对 HTML 元素及 SVG 元素的部分添加阴影效果，以实现一种酷炫的光影效果，用于各种不同的场景之中。通过本文，你可以学到： 如何利用 filter: drop-shadow() 对元素的部分内容添加单重及多重阴影
阅读全文
摘要：到国庆了，大家都急着给祖国母亲庆生。 每年每到此时，微信朋友圈就会流行起给头像装饰上国旗，而今年又流行这款： emm，很不错。 那么，将一张国旗图片与我们的头像，快速得到想要的头像，使用 CSS 如何简单实现呢？ 有人认为是改变其中一张图的透明度，实际上不是的。仔细观察合成后的头像，最左边的基本上只
阅读全文
摘要：本文将介绍一个小技巧，通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果。 起因 一日，一群友私聊问我。如何使用 CSS 实现下述效果，一个文字的波浪效果： 我当时想都没想，就回答道，这个很简单啊。 熟练的打开 CodePen，一顿操作，卧槽，好像事情没有那么简单。想要用纯 C
阅读全文
摘要：本文将讲解如何利用 background 系列属性，巧妙的实现一些花式的文字效果。通过本文，你将可以学到： 通过 background-size 与 background-position 实现酷炫的文字下划线效果 通过 background-size 与 background-position 以
阅读全文
摘要：本文较短，将介绍巧用模糊实现视觉 3D 效果的技巧。 我们都知道，在正常的视觉效果中，离我们越近的通常我们会看的越清晰，而离我们较远则相对没那么清晰~ 我们可以利用清晰与模糊两种状态来构建视差效果。像是这样： 而在 CSS 中，我们可以利用模糊滤镜 filter: blur() 与 transfor
阅读全文
摘要：本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性，实现各类有趣、酷炫的动画效果。认真读完，你将会收获到： 了解 CSS 3D 的各种用途 激发你新的灵感，感受动画之美 对于提升 CSS 动画制作水平会有所帮助 CSS 3D 基础知识 本文默认读者掌握一定的 CSS 3D 知识，能够绘制初步
阅读全文