HTML & CSS » 30个免费的CSS3动画片段代码

30个免费的CSS3动画片段代码

发表于: HTML & CSS. 评论 (1)
Sponsor

对于网页设计师来说，前端代码CSS/HTML不是强项，但有时候也是需要写的。特别是现在流行CSS3动画，学习和了解一些相关知识是必须的。

CSS3动画其实不算复杂，比JS简单得多，今天我们整理自CODEPEN上的一些好看的CSS3动画片段，从这些案例中设计师可以从中学习，并了解一些新的代码写法，又或者获取一些动画灵感也是不错的哦。

以下为CSS3动画案例整理：

青蛙与小船动画

美丽的小河，有一只可爱的小蛙，如果配合“呱呱呱”或者船只的声音就更赞了。

full page css3 animation sailboat
查看代码

天所图标

animated weather icons howto code
查看代码

加载动画

open source css3 loader animations
查看代码

网页弹窗效果

css3 magnific popup code
查看代码

Cube Animation

css3 rotation loop cube animated 3d
查看代码

Circle Illusion Loader

illusion circle loader animation effect
查看代码

赞按钮效果

tumblr style animation like unlike
查看代码

Minimal Throbbers

animated circles throbbers free code
查看代码

CSS3 Animated Effects

hover animated effects css3 code
查看代码

Map Marker

css3 only map marker animated icon
查看代码

Cloudy Spiral

cloudy spiral effect css3 open source
查看代码

CSS3 MacBook Air

css3 macbook air icon animated movable
查看代码

Concentric Spheres

loading animation freebie concentric spheres
查看代码

CSS3实现3D立方体

css3 animation effect using cubes
查看代码

Slidedown UI

pure css3 slide down menu toggle
查看代码

网页开头按钮

css3 glowing light switch on off
查看代码

转动的齿轮

moving css3 gears icon style
查看代码

Green Beaker

green science beaker lab icon motion
查看代码

Progress Bars

html5 animated css3 progress bars
查看代码

PayPal Animation

css3 paypal loading animation effect open source
查看代码

CSS3 加载样式

css3 loader animation effect freebie
查看代码

带动画的Wifi 图标

animated wifi lines symbol css3
查看代码

CSS3 Buttons

css3 button hover animation effect
查看代码

Animated Checkbox

css3 animated check box effect
查看代码

Camera Icon

css3 pure camera icon animation open source
查看代码

漂亮的旋转按钮

glowing light circle rotation effect
查看代码

iOS-Style Switches

css3 switches ios7 ios8 open source code
查看代码

Working Clock

css3 working clock animated effect
查看代码

Rabbit

jumping vector css3 rabbit effect animated
查看代码

CSS3 Loading Bar

css3 loading bar animated effect
查看代码

整理：WDL

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。
赞助商链接

与 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

+ 添加评论One Response to “30个免费的CSS3动画片段代码”

  1. 邬磊 - 回复
    2015 年 01 月 13 日 上午 11:44

    不错，学着做做~~


{ 发表评论 }