css动画效果代码案例_25个CodePen上激发你创作灵感的动画案例，附源码

作品来源 | https://codepen.io/ 文章整理 |  杨小二 CodePen是很多程序员用来展示代码创作的首选在线工具。今天，我为大家精选的25个CodePen上CSS动画展示案例，这些动画案例作品均来源于CodePen上，所有作品均归原创作者所有，我在这里只是与大家分享学习使用。 并且在每个作品下面都附上了作品的源码地址，供大家学习使用，这个gif动画，是我在编辑文章时候，通过工具录制的，效果可能没有源码地址的效果那么流畅，如果你想查看更好的效果，建议你通过浏览器打开源码地址进行查看与学习。 如果你不知道怎么创作动画的话，那今天25个案例，希望能够激发你的创造灵感，让编码变得更加有趣。

1、JavaScript米奇手表

源码地址：https://codepen.io/jaysalvat/pen/ogQbKB/ 这是结合CSS过渡，SVG图形和JavaScript将指针放在可爱的米老鼠表盘上的示例。米老鼠的两只手就是表盘上的时针与分针，截图如下：

2、 CSS打造的潜水艇

源码地址：https://codepen.io/ajerez/pen/EaEEOW/ 这款CSS动画潜水艇的效果，是不是很好玩，特别是再做一些少儿项目的时候，再网页添加一些这样的动画效果，会让网站增添许多魅力。 3、纯CSS打造的汽车Loading加载动画 源码地址：https://codepen.io/igor0ser/pen/amJkvp 一点微妙的动作就能营造出强烈的强度感！这款Loading动画，采用了一辆看起来像正在行驶的汽车，全部由CSS创建。里面没有图像，这将提升网页的加载速度。 4、ASCII AT-AT 源码地址：https://codepen