15个来自Codepen的令人赞叹的CSS动画例子

Codepen 正在迅速的成为我们展示网页作品的好去处。这里列出了近期一些人用CSS3创建的动画实例。

1.JavaScript Mickey Watch(JavaScript米老鼠时钟)

Apple watch like Mickey watch by Jay Salvat (@jaysalvat).

这是一个结合CSS的transitions、SVG图形和JavaScript来控制米老鼠手势位置显示时钟的可爱的例子。

2. CSS Submarine(CSS潜艇)

Submarine with CSS by Alberto Jerez (@ajerez).

圆形孔状容器的使用给这款CSS动画潜艇增加了很多魅力。

3. ASCII AT-AT

AT-AT by Tim Pietrusky (@TimPietrusky).

受星球大战启发绘制的AT-AT人体载体，非常时髦的效果。

4. SVG/CSS Loader(SVG/CSS 加载效果)

Loader SVG/CSS by Bidji (@Bidji).

通过改变色彩给人以旋转的印象。

5. 3D CSS Tardis

3D CSS Tardis by Gerwin van Royen (@Gerwinnz).

CSS可以创造出惊人的3D效果。这是一个用CSS实现的3D Tardis。

6. Dozing Bird(打瞌睡的小鸟)

Dozing Bird by Peter Klein (@pmk).

简单的艺术风格和适量的动画，给这个小鸟以犯困的幻觉。

7. Pure CSS border animation(纯CSS边框动画)

Pure CSS border animation without SVG by Rplus (@rplus).

简单有效的用CSS边框实现的一个加载效果。

8.Star Wars: The Force Awakens(星球大战：原力觉醒)

Star Wars: The Force Awakens in CSS by Donovan Hutchinson (@donovanh).

使用HTML、CSS和一些JavaScript实现的即将到来的星球大战的标题。

9. 3D Synth(3D合成器)

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

试下用鼠标点击这个用CSS实现的电子琴，还可以旋转。惊人的效果。

10. Cascading Solar System(太阳系)

Cascading Solar System! by Tady Walsh (@tadywankenobi).

完全按照大行星和卫星的缩放比例、旋转速度实现的太阳系。

11. 3D Solar System(3D太阳系)

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实现的十二面体。

 

本文由 Specs 翻译整理，发布在 WEB资源网，转载请注明来源。