随笔分类 - 新特性
摘要：我的小册 《CSS 技术揭秘与实战通关》上线了，想了解更多有趣、进阶、系统化的 CSS 内容，可以猛击 - LINK。 本文，我们将一起利用纯 CSS，实现如下这么个酷炫的效果： 在一年前，我介绍了 CSS 中非常新奇有趣的一个新特性 -- @scroll-timeline：革命性创新，动画杀手锏
阅读全文
摘要：很早之前，就写过一篇与原生嵌套相关的文章 -- CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？，彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段，而今天（2023-09-02），CSS 原生嵌套 Nesting 终于成为了既定的规范！ CSS 原生
阅读全文
摘要：本文，我们将一起学习，使用纯 CSS，实现如下所示的动画效果：  上面的动画效果，非常有意思，核心有两点： 1. 小球随
阅读全文
摘要：本文，将向大家介绍 CSS 规范中，最新的 Anchor Positioning，翻译为**锚点定位**。 Anchor Position 的出现，极大的丰富了 CSS 的能力，虽然语法稍显复杂，但是有了它，能够实现非常多之前实现起来非常困难，或者压根无法使用纯 CSS 实现的功能。 Anchor
阅读全文
摘要：在 CSS 中，存在许多数学函数，这些函数能够通过简单的计算操作来生成某些属性值，例如 ： * calc()：用于计算任意长度、百分比或数值型数据，并将其作为 CSS 属性值。 * min() 和 max()：用于比较一组数值中的最大值或最小值，也可以与任意长度、百分比或数值型数据一同使用。 * c
阅读全文
摘要：图片资源，在我们的业务中可谓是占据了非常大头的一环，尤其是其对带宽的消耗是十分巨大的。 对图片的性能优化及体验优化在今天就显得尤为重要。本文，就将从各个方面阐述，在各种新特性满头飞的今天，我们可以如何尽可能的对我们的图片资源，进行性能优化及体验优化。 图片类型的选取及 Picture 标签的使用 首
阅读全文
摘要：大部分同学都知道，在 CSS 世界中，有 vw、vh、vmax、vmin 这几个与视口 Viewport 相关的单位。 正常而言： 1vw 等于1/100的视口宽度 （Viewport Width） 1vh 等于1/100的视口高度 （Viewport Height） vmin — vmin 的值是
阅读全文
摘要：今天，收到一个很有意思的提问，如何实现类似如下的背景效果图： 嗯？核心主体是由多个六边形网格叠加形成。 那么我们该如何实现它呢？使用纯 CSS 能够实现吗？ 当然可以，下面我们就将尝试如何使用 CSS 去实现这样一个背景效果。 如何绘制六边形？ 首先，看到这样一个图形，如果想要使用一个标签完成整个背
阅读全文
摘要：本文是 CSS Houdini 之 CSS Painting API 系列第四篇。 现代 CSS 之高阶图片渐隐消失术 现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！ 现代 CSS 高阶技巧，完美的波浪进度条效果！ 在上三篇中，我们详细介绍了 CSS Painting API 是如
阅读全文
摘要：在过往，我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化，像是这样： <div class="img"></div> div { width: 300px; height: 300px; background: url(image.jpg); transition: .4s; } .i
阅读全文
摘要：终于，在漫长的等待下，容器查询（CSS Container Queries）将在 Chrome 105 版本得到正式的支持！ 而目前，我们也能在 Chrome Canary 版本中，或者在 Chrome 93~104 通过开启 Enable CSS Container Queries 特性抢先体验。
阅读全文
摘要：本文，将向大家介绍一种将多个 CSS 技巧运用到极致的技巧，利用纯 CSS 实现拼图游戏。 本技巧源自于 Temani Afif 的 CodePen CSS Only Puzzle game。一款完全由 CSS 实现的拼图游戏。 我们要做的，就是将散落的图片碎块，复原成一幅完整的图，像是这样： 注意
阅读全文
摘要：在平时，我非常喜欢利用 CSS 去构建一些有意思的图形。 我们首先来看一个简单的例子。首先，假设我们实现一个 10x10 的格子： 此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色： 虽然利用了随机，随机填充了每一个格子的颜色，看着有那么点意思，但是这只是一幅杂乱无章的
阅读全文
摘要：今天，要介绍一种基于 CSS mask-composite 的高级技巧。 通过掌握它，我们可以通过一张 图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。 通过单张 PNG/SVG 得到它的反向切图 事情的经过是这样的，某天，我们拿到了这样一张 PNG/SVG 图片： 就这张图片而言，它是
阅读全文
摘要：最近在业务中实际使用 content-visibility 进了一些渲染性能的优化。 这是一个比较新且有强大功能的属性。本文将带领大家深入理解一番。 何为 content-visibility？ content-visibility：属性控制一个元素是否渲染其内容，它允许用户代理（浏览器）潜在地省略
阅读全文
摘要：在 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
阅读全文
摘要：步入 2022，CSS 的新特性层出不穷，而最近在 CSS 圈最受瞩目的新特性，非 CSS @layer 莫属。 本文，将用最简洁的语言，快速让读者们搞懂，到底什么是 CSS @layer 新规范。 过往 CSS 优先级中存在的问题 如果我们的页面上存在非常多的样式，譬如有我们开发页面的时候的自定义
阅读全文
摘要：在 CSS 规范 Scroll-linked Animations 中，推出了一个划时代的 CSS 功能。也就是 -- The @scroll-timeline at-rule，直译过来就是滚动时间线。 本文，就将带大家一探究竟，从入门到学会使用 CSS @scroll-timeline。 何为 @
阅读全文
摘要：今天，在 CodePen 上看到一个很有意思的效果 -- GSAP 3 ETC Variable Font Wave，借助了 JS 动画库 GSAP 实现，一起来看看： 我寻思着能否使用 CSS 复刻一版，鼓捣了一会，利用纯 CSS 成功实现了原效果。 上述效果，最核心的就是文字的动画，文字从较细贴
阅读全文
