标签归档:CSS3动画

纯CSS3抽屉打开关闭动画

这是一款基于纯CSS3的抽屉打开关闭动画,抽屉一共有3层,每一层都标识一个名称,只有打开抽屉才可以看到。当你用鼠标点击某一个抽屉时,该抽屉便会打开,再点击一次便会关闭。当然也许这款动画对你的实际应用并不会有太大帮助,但是它可以让你学习到很多关于CSS3的动画特性。

pure-css3-drawer-animation

在线演示源码下载

CSS3 3D线条变换进度条动画

之前我们分享过很多CSS3进度条动画插件,比如这9款超富有创意的CSS3进度条动画,另外还有很多。今天给大家带来的是一款基于CSS3的3D线条变换进度条动画,它是由一系列排成一行的点通过线条旋转变换形成的3D立体动画来构建一个带有进度条视觉效果的动画特效,特别适合应用在个性化比较强的页面上。

css3-3d-line-progressbar

在线演示源码下载

纯CSS3磁带动画特效

之前我们分享过一些基于HTML5和CSS3的磁带动画,比如这款纯CSS3实现超酷的磁带动画是利用CSS3绘制而成;这款HTML5卡带式古典播放器更是利用HTML5技术实现了磁带播放音乐。今天要带来的是一款纯CSS3绘制而成的磁带特效,它利用CSS3特性绘制了磁带,同时利用CSS3动画属性实现磁带的滚动。

pure-css3-tap-animation

在线演示源码下载

CSS3地图热点区域动画

今天我们要给大家分享一款基于CSS3的地图动画,它的核心功能并不是地图数据的展示,比如城市和省份地区的关系,而是展示了热点地区的动画特效。在地图上分布了很多热点区域,利用CSS3的动画属性实现这些热点区域的闪烁动画效果。

css3-map-hot-area

在线演示源码下载

纯CSS3无穷级楼梯台阶动画

今天我们要给大家带来一款很有意思的纯CSS3动画特效。这是一个无穷级的楼梯台阶动画,从视觉角度上看,这个台阶就像是盘旋而上,就像自动扶梯一样可以无穷尽地循环运动。这一个个台阶仅仅是一个个简单的div堆积而成,利用CSS3动画属性让这些div运动起来,从而产生楼梯盘旋而上的视觉效果。

pure-css3-infinite-stairs

在线演示源码下载

纯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

在线演示源码下载