赞!15个来自 CodePen 的酷炫 CSS 动画效果
2015-05-25 13:37
781 查看
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 创建的微妙的,美丽的十二面体动画。
您可能感兴趣的相关文章
网站开发中很有用的 jQuery 效果【附源码】
分享35个让人惊讶的 CSS3 动画效果演示
十分惊艳的8个 HTML5 & JavaScript 特效
Web 开发中很实用的10个效果【源码下载】
12款经典的白富美型 jQuery 图片轮播插件
本文出处【http://www.cnblogs.com/lhb25/】
今天这篇文章为大家挑选了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 创建的微妙的,美丽的十二面体动画。
您可能感兴趣的相关文章
网站开发中很有用的 jQuery 效果【附源码】
分享35个让人惊讶的 CSS3 动画效果演示
十分惊艳的8个 HTML5 & JavaScript 特效
Web 开发中很实用的10个效果【源码下载】
12款经典的白富美型 jQuery 图片轮播插件
本文出处【http://www.cnblogs.com/lhb25/】
相关文章推荐
- 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
- 网页设计中热门的css和js酷炫动画效果
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
- android上开源的酷炫的交互动画和视觉效果
- 15个瞬间击中你的数据可视化案例——高颜值、故事性、动画效果...哪个是你的菜?
- 收集android上开源的酷炫的交互动画和视觉效果:Interactive-animation
- 一款非常简单酷炫的LoadingView动画效果
- css动画翻转效果
- 10个CSS和jQuery的加载中(loading)动画效果实现
- css 动画效果 -- transition
- css常用属性以及动画效果代码
- CSS 循环动画效果。
- css动画属性实现3d效果立体盒子效果
- CSS动画效果
- 纯CSS实现SVG路径描边动画效果
- Android自定义Activity酷炫的动画跳转效果
- css3 | 中的animation/@keyframes xz动画效果-如何使用纯css实现动画效果? 用法:animation:xz 3s 2 4s alternate; 参数:animati
- 浅谈CSS动画效果
- css动画实现翻书效果
- CSS实现四种loading动画效果