最近，群里在讨论一个很有意思的线条动画效果，效果大致如下： 简单而言，就是线条沿着不规则路径的行进动画，其中的线条动画可以理解为是特殊的光效。 本文，我们将一起探索，看看在不使用 JavaScript

这个是根据three现有案例来模仿实现，[原网址](three.js css3d - periodic table (threejs.org)) 效果图： template部分 script部分 st

需求先看一下需求，实现效果如下图，就是用户滑动页面的时候实现元素这样按顺序“蹭蹭蹭”的冒出来。效果并不复杂，要实现这个效果我最开始想到的，就是根据用户滚动页面的距离和元素位置去计算。这样的确能实现，但

CSS的任何新特性从诞生到被浏览器普遍支持，要经历漫长的周期，而CSS Houdini开放了底层接口，让开发者直接接触、开发原生的CSS效果，实现更为复杂、流畅的效果和动画，无需等待。

我的新的专栏 -- 现代 CSS 与 Web 动画解决方案。 将专注于实现复杂布局，兼容设备差异，制作酷炫动画，制作复杂交互，提升可访问性及构建奇思妙想效果等方面的内容。 在兼顾基础概述的同时，注重对

animation动画详解：css中实现动画有两种方式：`transition`过渡动画、 `animation`自定义动画。本文主要讲解`animation`动画的使用，若要了解……

使用color: transparent将文字颜色设置为透明， background-clip: text设置背景根据文字形状裁剪，最后设置渐变背景即可完成渐变彩虹文字🌈

假设，我们有这样一张 Gif 图： 利用 CSS，我们尝试来搞一些事情。 图片的 Glitch Art 风 在这篇文章中 --CSS 故障艺术，我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。有点类

本案例中借助了第三方动画插件animejs,其实借助的话同样也是可以实现的，就是自己最近刚好再使用这个插件，最算是加深熟悉吧。在这里我也想大家推荐这个插件官网，真的内nice animeJs,戳这里