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

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

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

1. JavaScript Mickey Watch

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

2. CSS Submarine

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

3. ASCII AT-AT

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

4. SVG/CSS Loader

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

5. 3D CSS Tardis

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

6. Dozing Bird

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

7. Pure CSS border animation

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

8. Star Wars: The Force Awakens

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

9. 3D Synth

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

10. Cascading Solar System

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

11. 3D Solar System

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

12. Flat Design Camera

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

13. Day and Night Transition

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

14. Animated Sprite with CSS

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

15. Dodecahedron

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

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

赞 (0) 打赏

评论 0

评论前必须登录!

登陆 注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏