CSS3纯样式加载动画
纯 CSS 写的加载动画，样式够炫，用法也简单，挺适合前端项目里搞个视觉亮点的。
纯样式的加载动画，重点就是靠CSS3 的动画搞定，不用一行 JS，干净利落，响应也快。
核心用到的就是@keyframes和animation属性。比如搞个小圆圈旋转，只要几行代码就能跑起来：
@keyframes spin {
to { transform: rotate(360deg); }
}.spinner {
width: 40px;
height: 40px;
border: 3px solid #f3f3f3;
border-top-color: #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}你只需要加个
包一下就能看到效果，用
position控制位置，用:before或:after还能加点装饰。
动画走得顺不顺，就看你animation-timing-function设得好不好，一般用linear就够了，平滑又省心。
如果你还想做点高级玩法，比如渐变背景、放射状动画，那就多试试transform和gradient组合，效果能上一个台阶。
不过哦，动画性能也得注意，别太花，尽量用translateZ(0)触发硬件加速，页面不卡用户才舒服。
兼容性方面，现在主流浏览器都 OK，老点的记得加个-webkit-前缀，保险一点。
如果你正好在搞登录页、数据求等待，或者要展示点加载过程，不妨用 CSS3 来造一个。想参考案例的，可以去这些文章看看：
如果你喜欢折腾样式，不靠 JS 也能玩出花，CSS3 动画真的挺香的。
下载地址
用户评论
