作品来源 | 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.io/TimPietrusky/pen/uLbfr/
通过《星球大战》启发AT-AT人员运输车,使用的文字以CSS中循环显示的颜色绘制而成。