CSS3炫酷加载动画
炫酷加载动画的 CSS3 玩法，真的是前端开发里挺有趣的一块。用得好，不光能让你的网站更有“动感”，还能把用户的等待变得更有趣。像是 @keyframes、transition、transform 这些属性，配合用起来，效果真心不错。
加载动画的灵魂是 @keyframes。比如你要做个小转圈的 loading 图标，只需要这样：
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}在元素上加一句 animation: spin 2s infinite;，立马转起来，挺方便的。
要想让颜色变得更顺滑？那就用 transition，比如按钮悬停时换个背景色：
button:hover {
background-color: blue;
transition: background-color 0.5s ease;
}页面想更有层次感，别忘了 transform，比如让一个元素放大再旋转：
.box {
transform: rotate(45deg) scale(1.5);
}代码写起来也不复杂，loaders.css 里其实封装了多动画样式，直接拿来用也行，改一改颜色和速度就能定制化。index.html 就是个展示用的 demo 文件，调试起来比较直观。
如果你想看更多实际案例，可以看看这些资源：
如果你正好要做一个过渡页或者求等待提示，拿这些动画上手练练挺不错的。还能学着调调动画节奏，慢慢玩出风格来。
文件大小：5.95KB
评论区