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. MySQL DELETE语句和TRUNCATE TABLE语句的区别

    MySQL DELETE语句和TRUNCATE TABLE语句的区别 2010-10-08 16:05 佚名 互联网 字号:T | T 在MySQL数据库中,DELETE语句和TRUNCATE TAB ...

  2. 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  3. EF(Linq)框架使用过程中的小技巧汇总

    这篇博客总结本人在实际项目中遇到的一些关于EF或者Linq的问题,作为以后复习的笔记或者供后来人参考(遇到问题便更新). 目录 技巧1: DbFunctions.TruncateTime()的使用 技 ...

  4. nw.js FrameLess Window下的窗口拖拽与窗口大小控制

    nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...

  5. 赴美工作常识（Part 6 - 绿卡排队）

    上一篇<赴美工作常识(Part 5 - 绿卡优先级)>解释完排队的优先级是怎么确定的,以及 PERM 和 I–140 表的意义,接下来就要解释一下队具体是怎么排的以及排到之后的 I–485 ...

  6. [每日电路图] 1、基于AT89C52单片机最小系统接口电路【转】

              come from:http://www.21ic.com/dianlu/basis/interface/2015-04-21/621607.htm AT89C52是美国Atmel ...

  7. js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  8. CSS hack前传——背景图片全屏

    在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出 ...

  9. Azure China (8) 使用Azure PowerShell创建虚拟机，并设置固定Virtual IP Address和Private IP

    <Windows Azure Platform 系列文章目录> 本文介绍的是由世纪互联运维的Windows Azure China. 相比于Global Azure (http://www ...

  10. java基础之集合框架

    6.集合框架: (1)为什么出现集合类? 面向对象对事物的体现都是以对象的形式,为了方便对多个对象的操作,就对对象进行存储. 集合就是存储对象最常用的一种方式. (2)数组和集合都是容器,两者有何不同 ...