第 208 题：CSS 如何实现一个加载中动画？

Question

这里是有个示例：

• transform 主要使用 transform 属性的 rotate，将线条组合成 Loading 图形（也就是常见的菊花图形）
• animation 实现将线条颜色由浅到深，再由深到浅来回变换的动画，通过 animation-delay 属性来使颜色的变换产生过渡的效果，从而达到类似于 Loading 动画的效果。

在线查看示例：https://www.wenjiangs.com/runcode?slug=JXpNr5dO

Answer 1

收集 N 个自定义加载动画，希望对你有所帮助

源码：http://codepen.io/mr_alien/pen/FDLjg/

源码：http://codepen.io/MarcMalignan/pen/svLux/

源码： http://codepen.io/majci23/pen/NqdXvy/

源码：https://codepen.io/jh3y/pen/VwLdVoZ

源码：https://codepen.io/akhil_001/pen/gQwJPJ

源码：https://codepen.io/team/keyframers/pen/YzKjoev

源码：https://codepen.io/aaroniker/pen/XWWPbep

源码：http://codepen.io/rss/pen/lKBaJ/

源码：http://codepen.io/jonathansilva/pen/GhkAI/

源码：http://codepen.io/TheDutchCoder/pen/mgswv/

源码：https://codepen.io/CKH4/pen/ZGNyep/

源码：http://codepen.io/dghez/pen/Czuqn/

源码： http://codepen.io/ispal/pen/mVaaJe/

源码： http://codepen.io/dan_reid/pen/rwhDf/

源码： http://codepen.io/tomchewitt/pen/yNdQrO/

源码：http://codepen.io/jackrugile/pen/BlDjk/

另外附上 150+ 款 CSS3 loading 加载动画，有需要的自行下载

链接: https://pan.baidu.com/s/1_At-qyFdiY_Em8pliOowgw   密码: prry