最近，群里在讨论一个很有意思的线条动画效果，效果大致如下： 简单而言，就是线条沿着不规则路径的行进动画，其中的线条动画可以理解为是特殊的光效。 本文，我们将一起探索，看看在不使用JavaScript/Canvas的基础上，使用纯CSS/SVG的方式，我们可以如何大致的还原上述的线条动画效果。 基于SVG的线条动画效果 谈到线条动画，尤其是不规则路径或者是复杂路径，我们第一时间应该想到的就是SVG中的stroke-dasharray和stroke-dashoffset。 这两个属性，我们在多篇文章中都有提及，也是非常有意思的线条动画效果，感兴趣的可以一并拓展阅读： CSS奇技淫巧|妙用dro...

最近，群里聊到了一个很有意思的布局效果。大致效果如下所示，希望使用CSS实现如下所示的布局效果： 正常而言，我们的HTML结构大致是如下所示： <divclass="g-container"> <divclass="g-nav"> <ul> <li>Tab1</li> <li>Tab2</li> <li>Tab3</li> <li>Tab4</li> </ul> </div> <divclass="g-main"> <u...

accent-color是从Chrome93开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。 简单而言，CSSaccent-color支持使用几行简单的CSS为表单元素着色，是的，只需几行代码就可以将主题颜色应用到页面的表单输入。 表单元素一直被吐槽很难自定义。而accent-color就是规范非常大的一个改变，我们开始能更多的自定义原生的表单的样式了！ 如何使用accent-color OK，我们一起来学习一下，我们应该如何使用accent-color。 首先，我们来实现这么一个简单的表单界面： &lt...

最近，有群里在群里发了这么一个非常有意思的卡片Hover动效，来源于此网站-key-drop，效果如下： 非常有意思酷炫的效果。而本文，我们不会完全还原此效果，而是基于此效果，尝试去制作这么一个类似的卡片交互效果： 该效果的几个核心点： 卡片的3D旋转跟随鼠标移动效果 如何让卡片在Hover状态，有不同的光泽变化 如何让卡片在Hover状态，有Blink，Blink的星星闪烁效果 当然，要做到卡片的3D旋转跟随鼠标移动效果需要一定程度的借助JavaScript，因此，最终的效果是CSS配合JavaScript以及一些动态效果的Gif共同实现。 好，下面就让我们一步一步一起来实现这个效果...

在23年的CSS新特性中，有一个非常重要的功能更新-相对颜色。 简单而言，相对颜色的功能，让我们在CSS中，对颜色有了更为强大的掌控能力。 其核心功能就是，让我们能够基于一个现有颜色A，通过一定的转换规则，快速生成我们想要的颜色B。 其功能能够涵盖： 精简 调暗 饱和度 降低饱和度 色度增强 调整不透明度 反转 补充 转换 对比度 调色板 完整的教程，你可以看这里-ChromeforDevelopersCSS相对颜色语法 当然，今天我们不会一个一个去过这些功能，更多的时候，我们只需要知道我们能够实现这些功能。 本文，我们将从实际实用角度出发，基于实际的案例，看看CSS相对颜色，能够如何解决...

今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样： 这个我们使用CSS还是可以轻松解决的，代码也很简单，核心代码： div{ border-radius:25px; border:2pxdashedaaa; } 但是，原生的dashed有一个问题，就是我们无法控制虚线的单段长度与间隙。 假设，我们要这么一个效果呢虚线效果呢： 此时，由于无法控制border:2pxdashedaaa产生的虚线的单段长度与线段之间的间隙，border方案就不再适用了。 那么，在CSS中，我们还有其它方式能够实现带圆角，且虚线的单段长度与线段之间间隙可控的方式吗？ 本文，我们...

今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样： 这个我们使用CSS还是可以轻松解决的，代码也很简单，核心代码： div{ border-radius:25px; border:2pxdashedaaa; } 但是，原生的dashed有一个问题，就是我们无法控制虚线的单段长度与间隙。 假设，我们要这么一个效果呢虚线效果呢： 此时，由于无法控制border:2pxdashedaaa产生的虚线的单段长度与线段之间的间隙，border方案就不再适用了。 那么，在CSS中，我们还有其它方式能够实现带圆角，且虚线的单段长度与线段之间间隙可控的方式吗？ 本文，我们就...

在页面布局中，我们经常会遇到/使用这么一类常见的布局，也就是列表内容水平居中于容器中，像是这样： <ulclass="g-contaner"> <li></li> <li></li> </ul> ul{ width:500px; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; gap:10px; } 效果如下： 这里，外层的容器是定宽的，内层的flex-item也是定宽的...

在页面布局中，我们经常会遇到/使用这么一类常见的布局，也就是列表内容水平居中于容器中，像是这样： <ulclass="g-contaner"> <li></li> <li></li> </ul> ul{ width:500px; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; gap:10px; } 效果如下： 这里，外层的容器是定宽的，内层的flex-item也是定宽的。 ...

最近，相信大家一定被这么个动效给刷屏了： 以至于，基于这个效果的二次创作层出不穷，眼花缭乱。 基于跨窗口通信的弹弹球： 基于跨窗口通信的FlippyBird： 我也尝试制作了一个跨Tab窗口的CSS动画联动，效果如下： 代码不多，核心代码200行，感兴趣的可以戳这里：GithubbroadcastAnimation 当然，本文的核心不是去一一剖析上面的效果具体的实现方式，而是讲讲其中比较关键的一个技术点： 而是应用如何在多窗口下进行互相通信。 所谓多窗口下进行互相通信，是指在浏览器中，不同窗口（包括不同标签页、不同浏览器窗口甚至不同浏览器实例）之间进行数据传输和通信的能力。 当然，本文...

我的小册 《CSS技术揭秘与实战通关》上线了，想了解更多有趣、进阶、系统化的CSS内容，可以猛击- LINK。 在CSS还原拉斯维加斯球数字动画一文中，我们利用纯CSS，实现了一个非常Amazing的动画效果： 其中一个核心点就是，我们利用了如下的代码，在一个DIV平面内，实现了单个平面下的随机文字随机颜色效果。 效果如下： 其中的HTML代码大致如下： <divclass="g-container"> <div></div> //...一个32个子div <div></div> </div>...

最近在群里，有个小伙伴问了这么一道很有趣的问题： CSS能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容 为了简化实际效果，我们看这么一张示意效果图： 可以看到，当容器高度没有超过某一个值时，没有箭头图标。反之，箭头图标出现。 这个效果在很多场景都会出现，可以算是一个高频场景，那么在今天，我们能否不使用JavaScript，仅仅凭借CSS实现类似于这样的功能呢？ 答案当然是可以，XBoxYan大佬在CSS实现超过固定高度后出现展开折叠按钮介绍了一种非常巧妙的借助浮动的解法，十分有意思，感兴趣的同学可以先行一步了解。 当然，浮动float在现如今的CSS世界，...

最近，相信大家一定被这么个动效给刷屏了： 以至于，基于这个效果的二次创作层出不穷，眼花缭乱。 基于跨窗口通信的弹弹球： 基于跨窗口通信的FlippyBird： 我也尝试制作了一个跨Tab窗口的CSS动画联动，效果如下： 代码不多，核心代码200行，感兴趣的可以戳这里：GithubbroadcastAnimation 当然，本文的核心不是去一一剖析上面的效果具体的实现方式，而是讲讲其中比较关键的一个技术点： 而是应用如何在多窗口下进行互相通信。 所谓多窗口下进行互相通信，是指在浏览器中，不同窗口（包括不同标签页、不同浏览器窗口甚至不同浏览器实例）之间进行数据传输和通信的能力。 当然，本...

我的小册 《CSS技术揭秘与实战通关》上线了，想了解更多有趣、进阶、系统化的CSS内容，可以猛击- LINK。 最近大家刷抖音，是否有刷到拉斯维加斯的新地标「Sphere」： 场馆内部的视觉效果非常惊人，其中一个效果让我虎躯一震： 我的第一想法就是，这个看起来用CSS也可以实现嘛？还有CSS不能实现的？ 本文，就将尝试使用CSS，大致还原这个效果。 拆解动画效果 其实，上述的动画效果，本质就是一个3D立方体。 同时，3D立方体上每个面存在颜色不一样的文字，文字和颜色都在随机变化。 也就是说，我们需要实现一个3D立方体： 同时，我们还需要实现这样一个动画效果-文字和...

我的小册 《CSS技术揭秘与实战通关》上线了，想了解更多有趣、进阶、系统化的CSS内容，可以猛击- LINK。 在知乎看到一题比较有意思的题目。 题目大致是如何实现下述图片的效果，如果使用div前置遮挡的话，会影响div后面的按钮，使其无法被点击。 本文将简单介绍几种这个效果的实现方案。 渐变配合pointer-event 第一种方式，比较容易想到。使用渐变配合pointer-event实现。 简单模拟一下场景，假设我们有如下一个ul列表，超出可以滚动： <divclass="g-container"> <ul> <li>Butt...

最近，在Steam玩一款老游戏（生化危机4重置版），其中，每当游戏转场的过程中，都有这么一个有趣的Loading动画： 整个效果有点类似于日食效果，中间一圈黑色，向外散发着太阳般的光芒。 本文，我们将尝试使用CSS，还原这个效果。 整个效果做出来，类似于如下两个动画效果这样： 实现主体效果 其实，整个效果，去掉中间黑色的遮罩，是这个样子的： 所以，我们的目标就变成了，如何使用CSS，实现上述这个图形效果。 角向渐变 到这里，思考一圈CSS中的各种属性，和这个图形能挂上钩的，几乎就只有角向渐变conic-gradient了。 我们可以利用多重角向渐变，试着画一个类似的图形-从单个颜色到透...

最近在群里，有个小伙伴问了这么一道很有趣的问题： CSS能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容 为了简化实际效果，我们看这么一张示意效果图： 可以看到，当容器高度没有超过某一个值时，没有箭头图标。反之，箭头图标出现。 这个效果在很多场景都会出现，可以算是一个高频场景，那么在今天，我们能否不使用JavaScript，仅仅凭借CSS实现类似于这样的功能呢？ 答案当然是可以，XBoxYan大佬在CSS实现超过固定高度后出现展开折叠按钮介绍了一种非常巧妙的借助浮动的解法，十分有意思，感兴趣的同学可以先行一步了解。 当然，浮动float在现如今的CSS世界，...

每天，我们都在和各种文档打交道，PRD、技术方案、个人笔记等等等。 其实文档排版有很多学问，就像我，对排版有强迫症，见不得英文与中文之间不加空格。 所以，最近在做这么一个谷歌扩展插件chrome-extension-text-formatting，通过谷歌扩展，快速将选中文本，格式化为符合中文文案排版指北的文本。 emmm，什么是排版指南？简单来说它的目的在于统一中文文案、排版的相关用法，降低团队成员之间的沟通成本，增强网站气质。 举个例子： 中英文之间需要增加空格 正确： 在LeanCloud上，数据存储是围绕AVObject进行的。 错误： 在LeanCloud上，数据存储是围绕AV...

本文，将向大家介绍CSS规范中，最新的AnchorPositioning，翻译为锚点定位。 AnchorPosition的出现，极大的丰富了CSS的能力，虽然语法稍显复杂，但是有了它，能够实现非常多之前实现起来非常困难，或者压根无法使用纯CSS实现的功能。 AnchorPosition当前仍属于实验室功能，新版本Chrome开启该功能： 浏览器URL输入框输入：chrome://flags/ 找到ExperimentalWebPlatformfeatures选项，开启该功能 何为AnchorPositioning？ 那么，什么是AnchorPositioning呢？ AnchorPosit...

本文，我们将一起学习，使用纯CSS，实现如下所示的动画效果： 上面的动画效果，非常有意思，核心有两点： 小球随机做X、Y方向的直线运动，并且能够实现碰撞到边界的时候，实现反弹效果 小球在碰撞边界的瞬间，颜色发生随机的变化 嗯？很有意思的效果。看上去，我们好像使用CSS实现了碰撞检测。 然而，实际情况真的是这样吗？让我们一起一探究竟！ 实现X轴方向的运动 这里其实我们并没有实现碰撞检测，因为小球和小球之间接触时，并没有发生碰撞效果。 我们只实现了，小球与边界之间的碰撞反应。不过这里，也并非碰撞检测，我们只需要设置好单个方向的运动动画，并且设置animation-direction:alte...