标签归档:CSS3动画

CSS3 Sprite 技术实现僵尸行走动画

行走动画是CSS3动画的经典类型之一,今天要分享的这款CSS3僵尸行走动画与之前介绍的纯CSS3人物行走动画纯CSS3实现大象走路动画不同,它是利用CSS Sprite技术实现的,也就是在同一张图片中绘制僵尸行走的每一帧,然后通过CSS3和JavaScript将这些帧播放,就形成了行走动画特效。

css3-sprite-zombie-walking

在线演示源码下载

CSS3超酷弹出对话框 兼容移动端

这是一款基于HTML5和CSS3的弹出对话框,一共有4种类型,每种对话框弹出的时候均带有一定的动画特效,比如成功时候的动画和加载时候的动画,都非常不错,和之前分享的jQuery弹出层对话框 外观优雅带遮罩相比,虽然没有强大的回调功能,但是非常简单,更适合在移动端使用。

css3-dialog-with-animation

在线演示源码下载

14款CSS3图片层叠切换动画

之前刚分享过一款jQuery层叠式翻页焦点图插件,非常不错。现在的这款CSS3图片层叠切换动画更加强大,拥有14种不同的图片切换动画,而且动画效果更加炫酷。这14种动画,每一种都有一点差异,你可以根据自己的需要来选择一种即可。

css3-fold-image-slider

在线演示源码下载

纯CSS3实现变形金刚组装动画特效

CSS3蛮强大的,我们可以利用CSS3来制作很多炫酷的动画特效,像上次分享的纯CSS3大象走路动画,就显得非常逼真。今天要分享的依然是一款用纯CSS3实现的动画,是一个变形金刚组装动画特效,这种组装动画将人物的各部位按某种顺序组合起来,显得非常酷。

pure-css3-jingang

在线演示源码下载

纯CSS3实现苹果设备 iPhone iPad iMac及iWatch

今天我们又要用CSS3来绘制一些有趣的东西,这次要绘制的是全套的苹果设备,包括iPhone、iPad、iMac及iWatch,配合各自的界面壁纸,显得非常逼真,同时跟现实中的设备一样,屏幕同样具有切换的效果,只不过这个是定时切换,并不能滑动切换,有兴趣的同学可以自行实现一下。

css3-iphone-ipad-imac-iwatch

在线演示源码下载

纯CSS3实现幽灵漂浮动画

这又是一款基于纯CSS3的动画特效,先是用CSS3绘制了一个“可爱”的幽灵,没用运用图片,其实用CSS3绘制一些简单的线条和图形非常简单。然后通过CSS3的动画属性对幽灵进行上下的漂浮,动画效果还是非常不错的。

pure-css3-ghost-float

在线演示源码下载

CSS3可旋转的卡通小鸟头像

这是一款很可爱的CSS3动画,关于HTML5小鸟的动画,大家可以去看看这个SVG HTML5可爱的小鸟卡通动画。今天要分享的这个也是基于纯CSS3实现的,只要我们将鼠标滑过小鸟头像,小鸟就会出现旋转的动画效果,非常可爱。

css3-bird-avatar

在线演示源码下载

CSS3鼠标悬停图片动画 15种超酷动画

今天要向大家分享一款很不错的CSS3鼠标悬停图片动画,它的特点是拥有15种超炫酷的鼠标悬停动画方式,由最简单的CSS3图片翻转动画,到比较复杂的组合动画,另外,这款CSS3图片悬停动画还可以将图片渲染成圆形,这个功能还是比较实用的。

css3-hover-image-15-animation

在线演示源码下载

CSS3鼠标滑过放大突出效果

还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错。今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种突出放大的CSS3动画特效。

css3-hover-scale

在线演示源码下载

CSS3/SVG沙漏式Loading加载动画

之前我们也已经分享过很多Loading动画进度条动画了,很多都是比较实用的应用。今天我们要再来分享一款基于CSS3和SVG的沙漏式Loading加载动画,尽管实现起来也比较简单,但是模拟效果相当逼真,适合来做整个页面加载时的等待动画。

css3-svg-hourglass-loading

在线演示源码下载