CodePen 是一个在线的前端代码编辑和展示网站，能够编写代码并即时预览效果。你在上面可以在线分享自己的 Web 作品，也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果。
今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子，这些 Demo 可以说都是艺术品。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览）
1. JavaScript Mickey Watch
Apple watch like Mickey watch by Jay Salvat (@jaysalvat).
米老鼠是大家非常熟悉的迪斯尼动画形象。这是一个可爱的效果，结合 CSS & SVG 图形实现的米老鼠钟表效果。
2. CSS Submarine
Submarine with CSS by Alberto Jerez (@ajerez).
这是一个综合使用 CSS 各种属性实现的潜水艇动画，是不是很逼真啊？
3. ASCII AT-AT
AT-AT by Tim Pietrusky (@TimPietrusky).
受《星球大战》启发，使用 CSS 编写的人员运输车效果，使用了多种文本颜色，一个时髦的效果。
4. SVG/CSS Loader
Loader SVG/CSS by Bidji (@Bidji).
这个 loading 效果通过使用变换的色彩来给人产生正在旋转的印象。
5. 3D CSS Tardis
3D CSS Tardis by Gerwin van Royen (@Gerwinnz).
CSS 可以用来制作各种有趣的 3D 效果，这是一个 3D 的Tardis（英国科幻电视剧中的时间机器和宇宙飞船）。
6. Dozing Bird
Dozing Bird by Peter Klein (@pmk).
简单的艺术风格，加上适量的动画给这个正在打瞌睡的鸟一种生活的幻觉。
7. Pure CSS border animation
Pure CSS border animation without SVG by Rplus (@rplus).
简单而非常有效的使用 CSS 边框创建的 loading-style 动画。
8. Star Wars: The Force Awakens
Star Wars: The Force Awakens in CSS by Donovan Hutchinson (@donovanh).
使用 CSS, HTML 和 JavaScript 制作的 《星球大战》电影片头标题效果。
9. 3D Synth
Pure CSS 3D Synthesizer (mousedown for rotation) by Nikolay Talanov (@suez).
使用纯 CSS 制作的 3D 电子琴效果，点击鼠标可以旋转。
10. Cascading Solar System
Cascading Solar System! by Tady Walsh (@tadywankenobi).
太阳系的模型，完成了旋转速度、卫星和每一个大的行星的细节。看起来就像现实世界的东西！
11. 3D Solar System
Full CSS 3D Solar System by Wayne Dunkley (@waynedunkley).
另一个太阳系的系统模型，不过这个是 3D 的，有美丽的阴影效果。
12. Flat Design Camera
Flat design camera with CSS animation by Damien Pereira Morberto (@damienpm).
使用CSS动画模拟在相机上按下快门，拍摄照片的动画效果。
13. Day and Night Transition
Day Night simulation by Szymon Stypa (@Catagen).
点击下面的按钮可以看到白天和黑夜的模拟效果。
14. Animated Sprite with CSS
Animate sprite with CSS by Avaz Bokiev (@samarkandiy).
示范序列图像（雪碧图）可以用来创建定格动画，配有正向和反向运动。
15. Dodecahedron
Dodecahedron by wontem (@wontem).
一个完全用 CSS 创建的微妙的，美丽的十二面体动画。
页
文章评论