本文是系列第五篇，终章。系列文章：现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用现代图片性能优化及体验优化指南 - 响应式图片方案现代图片性能优化及体验优化指南 - # 缩放精细化展示及避免布局偏移、拉伸现代图片性能优化及体验优化指南 - 懒加载及异步图像解码方案图片资源，在我们的业务中可谓...

这里我们借助了上面 #12、结构性伪类 中的 :root{ } 伪类，在全局 :root{ } 伪类中定义了一个 CSS 变量，取名为 --bgColor 。

在许久之前，曾经写过这样一篇文章 -- 不定宽溢出文本适配滚动。我们实现了这样一种效果：文本内容不超过容器宽度，正常展示文本内容超过容器的情况，内容可以进行跑马灯来回滚动展示像是这样：但是，之前的方案，有一个很明显的缺点，如果我们事先知道了容器的宽度，那么没问题，但是如果没法确定容器的宽度，也就文本...

本文是系列第四篇。系列文章：现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用现代图片性能优化及体验优化指南 - 响应式图片方案现代图片性能优化及体验优化指南 - # 缩放精细化展示及避免布局偏移、拉伸图片资源，在我们的业务中可谓是占据了非常大头的一环，尤其是其对带宽的消耗是十分巨大的。对图...

本文是系列第三篇。系列文章：现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用现代图片性能优化及体验优化指南 - 响应式图片方案图片资源，在我们的业务中可谓是占据了非常大头的一环，尤其是其对带宽的消耗是十分巨大的。对图片的性能优化及体验优化在今天就显得尤为重要。本文，就将从各个方面阐述，...

对图片的性能优化及体验优化在今天就显得尤为重要。本文，就将从各个方面阐述，在各种新特性满头飞的今天，我们可以如何尽可能的对我们的图片资源，进行性能优化及体验优化。

今天，有个群友在群里提问，使用 CSS 能否实现下述这个图形：emmm，中间这个酷似三次贝塞尔曲线的造型，使用 CSS 不太好实现。我的建议是切图实现，然而群友要求一定要用 CSS 实现。虽然麻烦，但是这个图形勉强也是能用 CSS 实现的。本文就将探讨一下上述图形的纯 CSS 实现方式，并且从中进行一定的扩展延伸。尝试实现这...

对图片的性能优化及体验优化在今天就显得尤为重要。本文，就将从各个方面阐述，在各种新特性满头飞的今天，我们可以如何尽可能的对我们的图片资源，进行性能优化及体验优化。

大部分同学都知道，在 CSS 世界中，有 vw、vh、vmax、vmin 这几个与视口 Viewport 相关的单位。正常而言：1vw 等于1/100的视口宽度 （Viewport Width）1vh 等于1/100的视口高度 （Viewport Height）vmin — vmin 的值是当前 vw 和 vh 中较小的值vmax — vw 和 vh 中较大的值vh 在移动端存在重大问题！但是，在移动端，情况...

在 CSS 中，倒影是一种比较常见的效果。今天，我们就将尝试，使用 CSS 完成各类不同的倒影效果，话不多说，直接进入主题。实现倒影的两种方式首先，快速过一下在 CSS 中，实现倒影的 2 种方式。使用 -webkit-box-reflect正常而言，-webkit-box-reflect 是一种非常便捷及快速的实现倒影的方式。-webkit-box-reflect 的语...

说到小程序，大部分同学的第一反应，可能是微信小程序、支付宝小程序，确实，小程序的概念深入人心，并且已经被约定俗成的绑定到某些互联网公司的 APP 上。

最近群里有这样一个有意思的问题，大家在讨论，使用 CSS 3D 能否实现如下所示的效果：这里的核心难点在于，如何利用 CSS 实现一个立体的数字？CSS 能做到吗？不是特别好实现，但是，如果仅仅只是在一定角度内，利用视觉障眼法，我们还是可以比较完美的还原上述效果的。利用距离、角度及光影构建不一样的 3D 效果这是一种...

今天，收到一个很有意思的提问，如何实现类似如下的背景效果图：嗯？核心主体是由多个六边形网格叠加形成。那么我们该如何实现它呢？使用纯 CSS 能够实现吗？当然可以，下面我们就将尝试如何使用 CSS 去实现这样一个背景效果。如何绘制六边形？首先，看到这样一个图形，如果想要使用一个标签完成整个背景，最先想到的肯...

假设，我们有这样一张 Gif 图：利用 CSS，我们尝试来搞一些事情。图片的 Glitch Art 风在这篇文章中 --CSS 故障艺术，我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。有点类似于抖音的 LOGO。像是这样：假设，我们有这样一张图：只需要一个标签即可 {代码...} 给两张同样的图片，叠加上 青色#0ff 和 红色#f00，并且...

本文是 CSS Houdini 之 CSS Painting API 系列第四篇。现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！现代 CSS 高阶技巧，完美的波浪进度条效果！在上三篇中，我们详细介绍了 CSS Painting API 是如何一步一步，实现自定义图案甚至实现动画效果的！在这一篇中，我们将继续探索，尝...

本文为稀土掘金技术社区首发签约文章，14 天内禁止转载，14 天后未获授权禁止转载，侵权必究！我的新的专栏 -- 现代 CSS 与 Web 动画解决方案。将专注于实现复杂布局，兼容设备差异，制作酷炫动画，制作复杂交互，提升可访问性及构建奇思妙想效果等方面的内容。在兼顾基础概述的同时，注重对技巧的挖掘，结合实际进行运...

但是，这个效果的缺陷也非常明显，虽然借助了 SCSS 简化了非常多的代码，但是，如果我们查看编译后的 CSS 文件，会发现，在利用 SCSS 只有 80 的代码的情况下，编译后的 CSS 文件行数高达 2400+ 行，实在是太夸张了。

在过往，我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化，像是这样： {代码...} {代码...} 但是，CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。想想看，下面这样一个效果，是 CSS 能够实现的么？答案是肯定的！本文就将一步一步，从零开始，仅仅使用一个标签，实...

大家都知道，当一些重大事件发生的时候，我们的网站，可能需要置灰，像是这样：当然，通常而言，全站置灰是非常简单的事情，大部分前端同学都知道，仅仅需要使用一行 CSS，就能实现全站置灰的方式。像是这样，我们仅仅需要给 HTML 添加一个统一的滤镜即可： {代码...} 又或者，使用 SVG 滤镜，也可以快速实现网站的置灰...

可以通过 控制台 --> 右边的三个小点 --> More Tools --> Layers 打开。即可以看到页面的一个 3D 层级关系，像是这样：

其实不仅仅是上面的屏幕宽度媒体查询，在 CSS 中，存在大量的以 @ 符号开头的规则。称之为 @规则(at-rule)。本文就将介绍一下除去媒体查询之外，其他有意思的且在未来会越来越重要的 @规则 规则。

在 CSS 中，渐变（Gradient）可谓是最为强大的一个属性之一。但是，经常有同学在使用渐变的过程中会遇到渐变图形产生的锯齿问题。何为渐变锯齿？那么，什么是渐变图形产生的锯齿呢？简单的一个 DEMO： {代码...} {代码...} 效果如下：其实，锯齿感已经非常明显了，我们再放大了看，其内部其实是这样的：又或者是这样：有...

每年的苹果新产品发布，其官网都会配套更新相应的单页滚动产品介绍页。其中的动画特效都非常有意思，今年 iPhone 14 Pro 的介绍页不例外。最近，刚好有朋友问到，其对官网的一段文字特效特别感兴趣，看适用简单却不知从何下手，我们来看看：整个动画大致是，随着页面的向下滚动，整个文字从无到出现，再经历一轮渐变色的...

背景鼠标拖拽元素移动，算是一个稍微有点点复杂的交互。而在本文，我们就将打破常规，向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果。在之前的这篇文章中 -- 不可思议的纯 CSS 实现鼠标跟随，我们介绍了非常多有意思的纯 CSS 的鼠标跟随效果，像是这样：但是，可以看到，上面的效果中，元素的移动不...

今天在论坛，有看到这样一道非常有意思的题目，简单的代码如下： {代码...} 样式如下： {代码...} 试问，标签 <p> 内的文字的颜色，是 green 还是 blue 呢？有趣的是，这里的最终结果是蓝色，也就是 color: blue 生效了。不对，正常而言，ID 选择器的优先级不应该比伪类选择器高么？为什么这里反而是伪类选择器的...

其实，对于一个页面的布局而言，标签越少不一定是好事，我们在考虑 DOM 的消耗的同时，也需要关注代码的可读性，以及后续基于这个布局的制作的交互的难易性等等。

而目前，我们也能在 Chrome Canary 版本中，或者在 Chrome 93~104 通过开启 Enable CSS Container Queries 特性抢先体验。

最近我在 CodePen 上看到了这样一个有意思的动画：整个动画效果是在一个标签内，借助了 SVG PATH 实现。其核心在于对渐变（Gradient）的究极利用。完整的代码你可以看看这里 -- CodePen DEMO -- to the future 🍻 By Jane Ori]源代码还是非常非常复杂的，并且叠加了复杂的 SVG PATH 路径。我尝试着将其稍微拆分成几小块，...

最近接到一个很有意思的需求，能否做到当内容横向溢出时，依然能够使用鼠标滚轮对内容进行滚动的方法。什么意思呢？来看看这么一种情况：我们有一个垂直方向溢出滚动的容器，以及一个水平方向溢出滚动的容器：如果使用的是非触控板（大部分用户没有触控板），而是使用鼠标来进行操作，会发现，这两个容器中，只有垂直方...

那么，这么有趣的点赞动画，有没有可能使用纯 CSS 实现呢？那当然是必须的，本文，就将巧妙的借助 transition，仅仅使用 CSS 完成这么一个点赞动画。