标签归档:CSS3动画

纯CSS3实现风浪中前行的3D海盗船

记得早些时候我们分享过一款基于SVG的轮船行驶动画,画面还是挺逼真的。这次我们要分享另外一款基于纯CSS3的3D海盗船动画,该动画分两部分,一个是用CSS3绘制的海盗船外观,船帆还会迎风抖动,还有一个便是海面,船只在海面上迎风前行,非常逼真。

pure-css3-3d-pirates

在线演示源码下载

纯CSS3五彩Loading加载动画

今天我们要给大家介绍一组相当漂亮的纯CSS3 Loading加载动画,这组Loading动画的风格有3种,一种是圆圈Loading动画、矩形方块Loading动画和文字Loading动画,并且Loading动画的颜色非常丰富,有一种高大上的视觉效果。另外,我们之前分享的SVG实现的一组超华丽Loading加载动画也十分不错。

pure-css3-colorful-loading

在线演示源码下载

CSS3太阳系各行星运行动画

这是一个基于CSS3的太阳系行星运行动画,中间是太阳,9大行星,包括行星相应的卫星,都按照自身的规律围绕太阳旋转,同时在太空中隐约模拟出许多星云,让整个动画显得更加逼真。这些动画效果都是通过CSS3动画属性实现。

css3-solar-animation

在线演示源码下载

超炫的SVG/CSS3游乐园动画

这是一款基于SVG和CSS3的游乐园动画,每一个细节都表现得非常不错。游乐园的各项活动设备都采用SVG的路径来描述的,并没有使用任何图片。同时游乐园中的摩天轮动画和气球漂浮动画都采用CSS3实现,看起来非常不错,和之前分享的SVG过山车动画非常类似。

svg-css3-park-animation

在线演示源码下载

纯CSS3实现的蒙娜丽莎画像

蒙娜丽莎画像非常著名,如果告诉你这幅画像我们可以使用纯CSS3绘制而成,你是否会觉得非常惊讶。没错,今天我们要分享的就是这个使用纯CSS3,没有使用任何图片的蒙娜丽莎画像,实现原理是利用CSS3的阴影特性,逐层用不同的颜色渲染,从而形成这幅蒙娜丽莎巨作,当然有点模糊是肯定的,毕竟是通过投影渲染的,是不是觉得非常神奇。

pure-css3-mona-lisa

在线演示源码下载

CSS3社交关系网模拟动画

这次我们要给大家分享一款CSS3模拟社交关系网的动画特效,社交网的中心是用户的头像图片,由中心连线展开到各个社交网络的Logo图片,同时每一条连接线上面都会有一个圆点由中心向各个节点移动,形成关系网的模拟动画,利用CSS3,我们可以让点运动,也可以让图片变成圆形,还是比较有趣的。

css3-social-net-animation

在线演示源码下载

CSS3鼠标滑过图片覆盖渐变颜色蒙版

今天我们要介绍一款比较实用的CSS3图片特效,它并没有非常华丽的动画效果,但是很多场合都可以用到。当我们将鼠标滑过图片时,图片上方会覆盖一层渐变颜色的蒙版,移开图片蒙版又会以渐变的方式消失,同时这层蒙版由于颜色动态渐变,因此给人一种发光的视觉效果。

css3-image-gradient-hover

在线演示源码下载

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

在线演示源码下载