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

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

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 创建的微妙的，美丽的十二面体动画。

页面加载太卡了，上篇请查看这里《15个来自 CodePen 的酷炫 CSS 动画效果【下篇】》

=======================================================

您可能感兴趣的相关文章

本文链接：赞！15个来自 CodePen 酷炫 CSS 动画效果

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

15个来自 CodePen 的酷炫 CSS 动画效果【下篇】的更多相关文章

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

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

  2. 使用Three.js网页引擎创建酷炫的3D效果的标签墙

    使用Three.js引擎(这是开源的webgl三维引擎,gitgub)进行一个简单应用. 做一个酷炫的3d效果的标签墙(已经放在我的博客首页,大屏幕可见), 去我的博客首页看看实际效果 www.son ...

  3. 一分钟搞定触手app主页酷炫滑动切换效果

    代码地址如下:http://www.demodashi.com/demo/12826.html 前言: 前几天在看手机直播的时候,自己就用上了触手app.一进到主页就看上了里面页面切换的效果,自己想这 ...

  4. 12个来自 Codrops 的创新交互和动画效果

    产品的用户体验是否被用户所接受,很大一部分取决于交互界面的设计,交互界面设计是整个产品设计中的核心,对于产品品质有着决定性的影响.这里集合了12个来自 Codrops 的创新的界面交互和动画效果,值得 ...

  5. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  6. CSS动画效果

    CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...

  7. 用 CSS 实现酷炫的动画充电效果

    巧用 CSS 实现酷炫的充电动画 循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果. 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了. ...

  8. Flutter 实现酷炫的3D效果

    老孟导读:此文讲解3个酷炫的3D动画效果. 下面是要实现的效果: Flutter 中3D效果是通过 Transform 组件实现的,没有变换效果的实现: class TransformDemo ext ...

  9. 运动曲线提升CSS动画效果

    原文链接 译文\译者鞠大宝 先有UI动画,然后才会有好的UI动画.好的动画会让人惊叹“哇哦!”——因为页面看上去很流畅.很漂亮,最重要的是,自然,一点都不会让人觉得不和谐或者僵硬死板.如果你经常逛Dr ...

随机推荐

  1. Linux内核--网络栈实现分析（九）--传输层之UDP协议（下）

    本文分析基于Linux Kernel 1.2.13 原创作品,转载请标明http://blog.csdn.net/yming0221/article/details/7549340 更多请查看专栏,地 ...

  2. linux shell 字符串操作

    转:http://justcoding.iteye.com/blog/1963463 在做shell批处理程序时候,经常会涉及到字符串相关操作.有很多命令语句,如:awk,sed都可以做字符串各种操作 ...

  3. 我的ORM之七-- 权限

    我的ORM索引 权限范围 权限可以控制以下部分: 页面 按钮 表格列 (未完成) 菜单表的行 其中: 页面权限,需要在程序请求之前进行判断. 按钮权限,表格列权限,需要在请求页面之后,通过JavaSc ...

  4. 设计模式之美：State（状态）

    索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):由 ConcreteState 指定它的后继 State. 意图 允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改 ...

  5. Github注册账户

    这是注册页面: 注册完后应该会受到邮件,但我一直没有收到,换了邮箱也没有用 ± 账户可以登上去却没办法创建仓库.

  6. java提高篇(八)----详解内部类

    可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二). 第一次见面 内部类我们从外面 ...

  7. MYSQL 大文件无法导入的问题。

    1. 设置maxpacket. 要在[mysqld]标签下.这个疏忽了,就会发现没效果. 基本网上的都没说清,要看stackoverflow. Change in the my.ini file. I ...

  8. c#生成MD5字符串

    public static string EncryptWithMD5(string source) { byte[] sor = Encoding.UTF8.GetBytes(source); MD ...

  9. 奇怪的BUG

    熟语说“常在河边走,哪能不湿鞋”,在现实中我想说:“代码写多了,总会遇到奇怪的bug”,遇到bug不可怕,可怕的是不自己不知道这么解决,有些bug能当时解决,有些在自己知识水平提高后知道如何解决.还有 ...

  10. ios 常用数学函数

    需要 引入头文件 #import <math.h> 1. 三角函数  double sin (double);正弦  double cos (double);余弦  double tan ...