赞！15个来自 CodePen 的酷炫 CSS 动画效果

CodePen 是一个在线的前端代码编辑和展示网站，能够编写代码并即时预览效果。你在上面可以在线分享自己的Web作品，也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果。

今天这篇文章为大家挑选了15个超炫的CSS动画效果的例子，这些 Demo 可以说都是艺术品。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览）

1. JavaScript Mickey Watch

Apple watch like Mickey watchby Jay Salvat .

米老鼠是大家非常熟悉的迪斯尼动画形象。这是一个可爱的效果，结合 CSS & SVG 图形实现的米老鼠钟表效果。

在线预览

2. CSS Submarine

Submarine with CSSby Alberto Jerez.

这是一个综合使用 CSS 各种属性实现的潜水艇动画，是不是很逼真啊？ 

在线预览

3. ASCII AT-AT

AT-ATby Tim Pietrusky.

受《星球大战》启发，使用 CSS 编写的人员运输车效果，使用了多种文本颜色，一个时髦的效果。

在线预览

4. SVG/CSS Loader

Loader SVG/CSSby Bidji.

这个 loading 效果通过使用变换的色彩来给人产生正在旋转的印象。

在线预览

5. 3D CSS Tardis

3D CSS Tardisby Gerwin van Royen.

CSS 可以用来制作各种有趣的 3D 效果，这是一个 3D 的Tardis（英国科幻电视剧中的时间机器和宇宙飞船）。

在线预览

6. Dozing Bird

Dozing Birdby Peter Klein.

简单的艺术风格，加上适量的动画给这个正在打瞌睡的鸟一种生活的幻觉。

在线预览

7. Pure CSS border animation

Pure CSS border animation without SVGby Rplus.

简单而非常有效的使用 CSS 边框创建的 loading-style 动画。

在线预览

8. Star Wars: The Force Awakens

Star Wars: The Force Awakens in CSS by Donovan Hutchinson.

使用 CSS, HTML 和 JavaScript 制作的 《星球大战》电影片头标题效果。

在线预览

9. 3D Synth

Pure CSS 3D Synthesizer (mousedown for rotation)by Nikolay Talanov.

使用纯 CSS 制作的 3D 电子琴效果，点击鼠标可以旋转。

在线预览

10. Cascading Solar System

Cascading Solar System!by Tady Walsh .

太阳系的模型，完成了旋转速度、卫星和每一个大的行星的细节。看起来就像现实世界的东西！

在线预览

11. 3D Solar System

Full CSS 3D Solar Systemby Wayne Dunkley.

另一个太阳系的系统模型，不过这个是 3D 的，有美丽的阴影效果。

在线预览

12. Flat Design Camera

Flat design camera with CSS animationby Damien Pereira Morberto.

使用CSS动画模拟在相机上按下快门，拍摄照片的动画效果。

在线预览

13. Day and Night Transition

Day Night simulationby Szymon Stypa.

点击下面的按钮可以看到白天和黑夜的模拟效果。

在线预览

14. Animated Sprite with CSS

Animate sprite with CSSby Avaz Bokiev .

示范序列图像（雪碧图）可以用来创建定格动画，配有正向和反向运动。

在线预览

15. Dodecahedron

Dodecahedronby wontem.

一个完全用 CSS 创建的微妙的，美丽的十二面体动画。

在线预览

未经允许不得转载：爱前端网 » 赞！15个来自 CodePen 的酷炫 CSS 动画效果