ChokCoco

摘要： 在早年间（其实也不是很早），写过几篇关于 CSS Reset 的文章 - reset.css 知多少。 详细描述了当时业界比较常用的，两个 CSS reset 方案：reset.css 与 Normalize.css。 以更为推荐的 Normalize.css 为例，它的核心思想是： 统一了一些元素 阅读全文

摘要： 之前在公众号转发了好友 Vajoy 的一篇文章 -- 巧用 CSS 把图片马赛克风格化。 核心是利用了 CSS 中一个很有意思的属性 -- image-rendering，它可以用于设置图像缩放算法。 何为 image-rendering？ CSS 属性 image-rendering 用于设置图像 阅读全文

摘要： 最近，有同学询问，如何使用 CSS 实现如下效果： 看起来是个很有意思的动效。 仔细思考一下，要想实现这类效果，其实用到的核心属性只有一个 -- background-clip: text。 有意思的 background-clip: text background-clip: text 之前也提到 阅读全文

摘要： FizzBu​​zz 是一道很有意思的题目。我们来看看题目： 如果遇见了 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 成功实现了原效果。 上述效果，最核心的就是文字的动画，文字从较细贴 阅读全文