随笔分类 - CSS进阶
摘要：今天，有在群里看到这样一个问题：有一个动画，一开始静止处于第一帧，只在用户 hover 的时候运行动画，在运行一次后停止，并且停留在最后一帧，使用 CSS 可以完成么？ 像是这样： 一个非常有意思的问题，答案是可以的。我们抽取一下其中的关键点： 动画只运行一次，未运行前处于第一帧，运行完后处于最后一
阅读全文
摘要：在 CSS 选择器家族中，新增这样一类比较新的选择器 -- 逻辑选择器，目前共有 4 名成员： :is :where :not :has 本文将带领大家了解、深入它们。做到学以致用，写出更现代化的选择器。 :is 伪类选择器 :is() CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择
阅读全文
摘要：在 CSS 中，其实存在各种各样的函数。具体分为： Transform functions Math functions Filter functions Color functions Image functions Counter functions Font functions Shape f
阅读全文
摘要：某日，群里有这样一个问题，如何实现这样的表盘刻度： 这其实是个挺有意思的问题，方法也有很多。 单标签，使用 conic-gradient 实现表盘刻度 最简单便捷的方式，就是利用角向渐变的方式 conic-gradient，代码也非常简单，首先，我们实现一个重复角向渐变： <div></div> d
阅读全文
摘要：CSS 阴影的存在，让物体看上去更加有型立体。 然而，在最简单的阴影使用之上，我们可以实现更多有意思且更加立体的阴影效果。 本文将带大家看看如何使用 CSS 实现几类比普通阴影更加立体的阴影效果。 CSS 阴影基础 CSS 中，明面上可以实现阴影的有三个属性： box-shadow - 盒阴影 te
阅读全文
摘要：今天，群友问了这样一个问题，如下所示的鼠标跟随交互效果，如何实现： 简单分析一下，这个交互效果主要有两个核心： 借助了 CSS 3D 的能力 元素的旋转需要和鼠标的移动相结合 本文，就将讲述如何使用纯 CSS 实现类似的交互效果，以及，借助 JavaScript 绑定鼠标事件，快速还原上述效果。 纯
阅读全文
摘要：本文将介绍利用 CSS 实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。 关于使用 CSS 实现滚动视差效果，在之前有一篇文章详细描述过具体方案 - CSS 实现视差效果，感兴趣的同学可以先看看这篇文章。 这里，会运用上这样一种纯 CSS 的视差技巧： 使用 transf
阅读全文
摘要：在早年间（其实也不是很早），写过几篇关于 CSS Reset 的文章 - reset.css 知多少。 详细描述了当时业界比较常用的，两个 CSS reset 方案：reset.css 与 Normalize.css。 以更为推荐的 Normalize.css 为例，它的核心思想是： 统一了一些元素
阅读全文
摘要：
之前在公众号转发了好友 Vajoy 的一篇文章 -- 巧用 CSS 把图片马赛克风格化。 核心是利用了 CSS 中一个很有意思的属性 -- image-rendering，它可以用于设置图像缩放算法。 何为 image-rendering？ CSS 属性 image-rendering 用于设置图像
阅读全文
之前在公众号转发了好友 Vajoy 的一篇文章 -- 巧用 CSS 把图片马赛克风格化。 核心是利用了 CSS 中一个很有意思的属性 -- image-rendering，它可以用于设置图像缩放算法。 何为 image-rendering？ CSS 属性 image-rendering 用于设置图像
阅读全文
摘要：最近，有同学询问，如何使用 CSS 实现如下效果： 看起来是个很有意思的动效。 仔细思考一下，要想实现这类效果，其实用到的核心属性只有一个 -- background-clip: text。 有意思的 background-clip: text background-clip: text 之前也提到
阅读全文
摘要：FizzBuzz 是一道很有意思的题目。我们来看看题目： 如果遇见了 3 的倍数要说 Fizz，5 的倍数就说 Buzz，如果即是 3 的倍数又是 5 的倍数就说 FizzBuzz。 如果是在一些编程语言中，这是一道比较初级的题目，当然，稍微转换一下，我们就可以把它转换成一道有关 CSS 选择器
阅读全文
摘要：步入 2022，CSS 的新特性层出不穷，而最近在 CSS 圈最受瞩目的新特性，非 CSS @layer 莫属。 本文，将用最简洁的语言，快速让读者们搞懂，到底什么是 CSS @layer 新规范。 过往 CSS 优先级中存在的问题 如果我们的页面上存在非常多的样式，譬如有我们开发页面的时候的自定义
阅读全文
摘要：最近几天，有好几个同学都问了同样一个问题。 页面上有一段文本，能否实现这段文本在不同背景色下展示不同的颜色？也就是俗称的智能变色。像是下面这样： 文本在黑色底色上表现为白色，在白色底色上表现为黑色。看似很复杂的一个效果，但是其实在 CSS 中非常好实现，今天就介绍这样一个小技巧，在 CSS 中，利用
阅读全文
摘要：今日，群里有个很有意思的问题，问我如何实现一个彩色的，带渐变的二维码，像是这样： 很有意思的问题，我们在百度谷歌，搜索 qrcode，能搜到非常多在线制作二维码的工具，它们其中一些也会带有制作渐变二维码的功能。但是它们大部分都是 Canvas 或者其它编程语言实现的。 如果我们现在已经有了一张白底黑
阅读全文
摘要：在 CSS 规范 Scroll-linked Animations 中，推出了一个划时代的 CSS 功能。也就是 -- The @scroll-timeline at-rule，直译过来就是滚动时间线。 本文，就将带大家一探究竟，从入门到学会使用 CSS @scroll-timeline。 何为 @
阅读全文
摘要：最近有个小伙伴问我，在某个网站看到一个使用 SVG 实现的炫彩三角边框动画，问能否使用 CSS 实现： 很有意思的一个动画效果，立马让我想起了我在 CSS 奇思妙想边框动画 一文中介绍的边框动画，非常的类似： 其核心就是利用了角向渐变（conic-gradient），然后将图案的中心区域通过覆盖遮罩
阅读全文
摘要：今天，在 CodePen 上看到一个很有意思的效果 -- GSAP 3 ETC Variable Font Wave，借助了 JS 动画库 GSAP 实现，一起来看看： 我寻思着能否使用 CSS 复刻一版，鼓捣了一会，利用纯 CSS 成功实现了原效果。 上述效果，最核心的就是文字的动画，文字从较细贴
阅读全文
摘要：最近几年 CSS 界的大事之一是每年年底的 《State Of CSS》，也就是 CSS 现状调查，去年年底发布了《State Of CSS 2021》。其中关于特性这一章，会列出一些比较新的 CSS 特性在当年的使用情况概览： 每个图代表一个特性，上图是按照使用数量进行区分，外圈表示听说过，而内圈
阅读全文
摘要：在我们的页面中，经常会出现这样的问题，一块区域内的文本或者边框，在展示的时候，变得特别的模糊，如下(数据经过脱敏处理)： 正常而言，应该是这样的： emmm，可能大图不是很明显，我们取一细节对比，就非常直观了： 何时触发这种现象？ 那么？什么时候会触发这种问题呢？在 Google 上，其实我们能搜到
阅读全文
摘要：最近 S11 LPL 春季赛开赛，在看比赛的过程中，我发现新赛季的 Ban/Pick 选人阶段，出现了一种新的，有意思的遮罩效果，如下图所示： 当然，它是一个动态的效果，当选人的过程中，会有一种呼吸的效果： Gif 图有点糊，总的而言，就是一种接近迷雾的遮罩效果。并且，他是能够动态变化的。 本文将探
阅读全文