标签归档:CSS3动画

CSS3士兵队伍整齐的步伐模拟动画

这是一款比较有趣的CSS3动画,动画中有一支士兵队伍迈着整齐的步伐,举着枪,一起向前进。这里每一个士兵人物都是通过CSS3绘制而成,当然这里每一个士兵都是一样的,因此使用同一套CSS3代码即可复制N个士兵人物。

css3-soldiers-walking

在线演示源码下载

纯CSS3绘制的可爱雪人 附雪花飘落动画

今天我们要给大家带来一款非常可爱的纯CSS3雪人动画,首先映入眼帘的是一场迷人的雪景,这里利用了CSS3的动画属性模拟了下雪的场景。同时我们又通过CSS3特性绘制了一个可爱的小雪人,胖乎乎的身体,还有双手和双脚、面部五官等都利用CSS3绘制而成。

pure-css3-snowman

在线演示源码下载

纯CSS3灯光开关动画 自定义checkbox样式

今天我们要分享一个纯CSS3灯光开关动画,切换开关可以改变页面背景颜色,从而模拟灯光的开启和关闭。值得注意的是,这款开关是通过CSS3自定义checkbox样式来实现的,记得很早以前也分享过类似的一个CSS3应用纯CSS3实现发光开关切换按钮,也是通过CSS3改变checkbox默认行为样式来实现的,外观都比较漂亮。

pure-css3-light-switch

在线演示源码下载

纯CSS3发光圆环Loading加载动画

关于Loading加载动画,我们已经分享过很多了,这里给出一篇文章《15个超炫酷的CSS3加载Loading动画图标》,里面收集了很多炫酷和实用的jQuery/CSS3 Loading加载动画。今天我们来分享一个基于纯CSS3的发光圆环Loading加载动画,配合深色的背景,Loading动画更是呈现出3D立体的视觉效果,非常值得大家使用。

pure-css3-light-ring-loading

在线演示源码下载

纯CSS3实现会跳舞的动画树

之前我们分享过一款基于HTML5 SVG的跳舞花朵,非常的可爱。今天我们要介绍一款纯CSS3实现的会跳舞的动画树,首先我们用CSS3绘制树枝和树叶,注意树枝的画法是利用了二叉树原理,在树枝最末端绘制树叶。同时树枝可以任意方向摇摆,形成跳舞的动画效果。

css3-dancing-tree

在线演示源码下载

CSS3手表倒计时动画 可自定义主题皮肤

早段时间,我们为大家分享过一些比较炫酷和实用的时钟手表插件,比如这款纯CSS3 3D立体圆盘时钟动画HTML5仿Apple Watch时钟动画,效果都非常不错。今天我们要利用CSS3来实现一个手表样式的倒计时动画,功能相对比较简单,最大的特点在于可以切换4种不同的主题皮肤。

css3-watch-timer

在线演示源码下载

SVG/CSS3自行车 模拟自行车行驶动画

之前我们为大家介绍过几款很酷的CSS3自行车动画,比如纯CSS3实现自行车动画特效纯CSS3 3D自行车动画。这次我们要分享的也是一款利用SVG路径特性和CSS3动画特性实现的自行车模拟行驶动画,自行车的外观是利用SVG路径绘制而成,再通过CSS3模拟脚踏板和轮胎的转动。

svg-css3-bike-running

在线演示源码下载

纯CSS3小姑娘荡秋千动画

这又是一款基于纯CSS3的动画特效,动画主要描绘了一个小姑娘荡秋千的情景,首先小姑娘人物和秋千都是用CSS3绘制而成,对于该动画实例来说,难度最大的在于小姑娘在荡秋千的时候身体各个部位关节的联动,在这个动画中,这方面表现得非常逼真。

css3-girl-swinging-animation

在线演示源码下载

纯CSS3模拟iPhone X背景切换动画

尽管iPhone已经没有像以前那么火了,但是苹果的UI设计还是可以肯定的。今天我们要给大家分享一款基于纯CSS3的iPhone X背景切换动画,整体的切换动画以淡入淡出为主,iPhone X屏幕的背景和页面的背景交相呼应,显得非常自然和谐。

css3-iphone-x-background

在线演示源码下载

纯CSS3蓝色蝴蝶动画

之前我们分享过几个漂亮的HTML5蝴蝶飞舞动画,比如超炫酷HTML5 Canvas蝴蝶飞舞动画HTML5 SVG 3D蝴蝶飞舞动画都非常炫酷。今天要分享的这款蝴蝶动画是基于纯CSS3的,虽然没有前面蝴蝶动画那么绚丽,但是蓝色的蝴蝶翅膀扇动起来也是别有一番风味的。

pure-css3-blue-butterfly

在线演示源码下载