Coco
在 CSS 中，其实存在各种各样的函数。具体分为： + [Transform functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#transform_functions) + [Math functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#math_functions) + [Filter functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#filter_functions) + [Color functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#color_functions) + [Image functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#image_functions) + [Counter functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#counter_functions) + [Font functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#font_functions) + [Shape functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#shape_functions) + [Reference functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#reference_functions)...
本文主要讲讲 CSS 非常新的一个特性，CSS @property，它的出现，极大的增强的 CSS 的能力！ 根据 [MDN -- CSS Property](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@property)，@property CSS at-rule 是 CSS Houdini API 的一部分, 它允许开发者显式地定义他们的 CSS 自定义属性，允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。 > `CSS Houdini` 又是什么呢，`CSS Houdini` 开放 CSS 的底层 API...
在 CSS 选择器家族中，新增这样一类比较新的选择器 -- **逻辑选择器**，目前共有 4 名成员： + `:is` + `:where` + `:not` + `:has` 本文将带领大家了解、深入它们。做到学以致用，写出更现代化的选择器。 ---- ## :is 伪类选择器 `:is()` CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。 在之前，对于多个不同父容器的同个子元素的一些共性样式设置，可能会出现如下 CSS 代码： ```CSS header p:hover, main p:hover,...
经常看一些 LOL 比赛直播的小伙伴，肯定都知道，在一些弹幕网站（Bilibili、虎牙）中，当人物与弹幕出现在一起的时候，弹幕会“**巧妙**”的躲到人物的下面，看着非常的智能。 简单的一个截图例子：  其实，这里是运用了 CSS 中的 MASK 属性实现的。 ## mask 简单用法介绍 之前在多篇文章都提到了 mask，比较详细的一篇是 -- [奇妙的 CSS MASK](https://github.com/chokcoco/iCSS/issues/80)，本文不对 mask 的基本概念做过多讲解，向下阅读时，如果对一些 mask 的用法感到疑惑，可以再去看看。 这里只简单介绍下 mask 的基本用法： 最基本，使用 mask 的方式是借助图片，类似这样： ```CSS...
某日，群里有这样一个问题，如何实现这样的表盘刻度：  这其实是个挺有意思的问题，方法也有很多。 ## 单标签，使用 conic-gradient 实现表盘刻度 最简单便捷的方式，就是利用角向渐变的方式 `conic-gradient`，代码也非常简单，首先，我们实现一个重复角向渐变： ```HTML ``` ```CSS div { width: 300px; height: 300px; border-radius: 50%; background: repeating-conic-gradient( #000 0, #000 .8deg, transparent 1deg, transparent calc((360...
问题先行，如何使用 CSS 实现下述滚动条效果？  就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？  ## 分析需求 第一眼看到这个效果，感觉这个跟随滚动动画，仅靠 CSS 是不可能完成的，因为这里涉及了页面滚动距离的计算。 如果想只用 CSS 实现，只能另辟蹊径，使用一些讨巧的方法。 好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成这个效果。分析一下难点： + **如何得知用户当前滚动页面的距离并且通知顶部进度条？** 正常分析应该是这样的，但是这就陷入了传统的思维。进度条就只是进度条，接收页面滚动距离，改变宽度。如果页面滚动和进度条是一个整体呢？ ## 实现需求...
## 背景 周末在家习惯性登陆 Apex，准备玩几盘。在登陆加速器的过程中，发现加速器到期了。 我一直用的**腾讯网游加速器**，然而点击充值按钮，提示最近客户端升级改造，暂不支持充值（这个操作把我震惊了~）。只能转头下载[**网易 UU 加速器**](https://uu.163.com/)。 打开 UU 加速器首页，映入眼帘的是这样一幅画面：  瞬间，被它这个背景图吸引。 出于对 CSS 的敏感，盲猜了一波这个用 CSS 实现的，至少也应该是 Canvas。打开控制台，稍微有点点失望，居然是一个 `.mp4`文件：  再看看 `Network` 面板，这个 `.mp4` 文件居然需要 3.5M？  emm，瞬间不想打游戏了。**这么个背景图，CSS 不能搞定么**？ ##...
本文将介绍利用 CSS 实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。 关于使用 CSS 实现滚动视差效果，在之前有一篇文章详细描述过具体方案 - [CSS 实现视差效果](https://github.com/chokcoco/iCSS/issues/37)，感兴趣的同学可以先看看这篇文章。 这里，会运用上这样一种纯 CSS 的视差技巧： ## 使用 `transform: translate3d` 实现滚动视差 这里利用的是 CSS 3D，实现滚动视差效果。 原理就是： 1. 我们给容器设置上 `transform-style: preserve-3d` 和 `perspective: xpx`，那么处于这个容器的子元素就将位于3D空间中， 2. 再给子元素设置不同的...
很久之前在张鑫旭大大的博客看到过一篇 [PNG格式小图标的CSS任意颜色赋色技术](http://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/)，当时惊为天人，感慨还可以这样玩，私底下也曾多次想过有没有其他方法可以实现，又或者不仅仅局限于 PNG 图片。 本方法与上面 ZXX 的方法及流传的使用 `filter 滤镜` drop-shadow 不同。发现这个方法也是在写另外一篇文章的过程中。 ## mix-blend-mode 与 background-blend-mode `mix-blend-mode` 在我之前的一篇文章初略介绍过 -- [不可思议的混合模式 mix-blend-mode](https://github.com/chokcoco/iCSS/issues/16)，与本文的主角 `background-blend-mode` 一样，都是实现混合模式的。 混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。 简单区分一下这两个属性：...
在上次写完这篇文章 -- [巧用渐变实现高级感拉满的背景光动画](https://github.com/chokcoco/iCSS/issues/150) 之后，文章下面的评论有同学留言，**使用 CSS 可以实现极光吗**？ 像是这样：  emmm，这有点难为人了。不过，最近我也尝试着去试了下，虽然不可能模拟出那么真实的效果，但是使用 CSS 还是可以作出类似的一些特效的，今天我们就一起来尝试下。 观察了一些极光的图片之后，我发现了极光动画中一些比较重要的元素： 1. 基于深色背景的明亮渐变色彩 2. 类似于水波流动的动画效果 明亮渐变色彩我们可以尽量使用 **渐变** 模拟。而水波流动的动画效果，在 SVG 滤镜中 **feturbulence** 就是专门干这个的，这个滤镜的使用在我过去的多篇文章中也有反复的提及过。 而除了渐变、SVG 的 `` 滤镜之外，我们可能还会用到**混合模式**（`mix-blend-mode`）、CSS 滤镜等提升效果。 OK，有了大概的思路后，剩下的就是不断的尝试。 ##...