CSS SNIPPET

动画效果

点击卡片标题或按钮查看代码片段。

多纳圈旋转载入指示器

创建一个多纳圈旋转载入指示器,可以用来表示内容处于载入过程中。

效果演示

查看代码

弹跳动画载入指示器

创建一个弹跳动画的载入指示器。

效果演示

查看代码

悬停下划线动画

为文本创建鼠标悬停时的下划线动画。

Credit: https://flatuicolors.com/

效果演示

Hover this text to see the effect!

查看代码

悬停阴影动画

为文本创建鼠标悬停时的阴影效果。

效果演示

Box it!

查看代码

按钮边框动画

为按钮创建一个鼠标悬停时的边框动画。

效果演示

查看代码

缓动变量

可重用的缓动变量,可用于transition-timing-function 属性,比 内置的ease, ease-in, ease-outease-in-out更强大。

效果演示
Hover

查看代码

高度过渡动画

height未知的元素的高度从0动画过渡到auto

效果演示
Hover me to see a height transition.
content

查看代码