标签归档:CSS3动画

CSS 3D 可嵌套多层立方体图片墙

之前我们为大家分享过几个基于HTML5和CSS3的3D立方体动画,比如CSS3 3D立方体图片墙 可拖拽360度旋转HTML5 3D立方体旋转动画。今天我们要介绍的也是一款CSS3 3D立方体图片墙,它与其他不同的是,立方体中可以嵌套小的立方体,动画效果非常不错。

css3-3d-mult-cube-image

在线演示源码下载

CSS3卡片鼠标悬停滑出分享按钮动画

这是一款基于CSS3的卡片图片动画,当我们将鼠标悬停在卡片上时,卡片中的图片和文字就会以不同的动画方式切换分离,然后弹出几个漂亮的分享按钮,你可以点击分享按钮分享这张卡片的内容。图片文字切换的动画是通过CSS3实现的,一共有9组不同的切换动画。

css3-card-share-buttons

在线演示源码下载

超可爱的CSS3叮当猫动画特效

前几天我们刚分享过一款基于纯CSS3绘制的小猫笑脸动画,CSS3的强大之处是在让人惊叹不已。这次我们要分享另外一款纯CSS3动画,它是一只可爱的叮当猫,鼠标滑过眼睛和嘴巴都可以让小叮当做出可爱的表情。

css3-pretty-doraemon

在线演示源码下载

纯CSS3绘制的小猫笑脸动画 超呆萌

CSS3的强大之处在于你不需要一行JS代码即可绘制任何图形,甚至是实现一些简单的动画特效。今天要分享的一款CSS3小猫笑脸动画就是一个相当典型的案例。示例中不仅用CSS3绘制了小猫的脸部,非常生动,而且小猫的眼睛还耳朵还会萌动,十分可爱。

css3-pretty-cat-face

在线演示源码下载

CSS3 3D立方体图片墙 可拖拽360度旋转

这是一款非常酷的CSS3立方体图片墙,在3D立方体的每一个面上都可以放置一张图片,你可以拖拽鼠标使立方体360旋转,非常具有立体感。而且立方体周围有发光的动画效果,这种发光效果的实现也是利用CSS3的相关特效,比较简单。

css3-3d-cube-360-view

在线演示源码下载

CSS3实现摩天轮动画特效

我们可以利用CSS3技术可以在网页上绘制任何东西,并且可以制作一些简单的动画。这次分享了一个用CSS3实现的摩天轮动画特效,摩天轮上悬挂着几个座位,几个小朋友坐在里面,摩天轮不断地旋转着,动画效果非常逼真。

css3-ferris-wheel

在线演示源码下载

纯CSS3实现汽车行驶动画

CSS3十分强大,它可以在没有一行JavaScript代码的情况下,实现很多意想不到的动画特效。这次分享的一款纯CSS3汽车行驶动画就非常逼真,汽车是用CSS绘制的,同样行驶动画也是CSS3动画特性实现的。和之前分享的一款CSS3人物行走动画类似,都是利用了CSS3强大的动画技术。

css3-car-running

在线演示源码下载

CSS3卡通人物弹跳动画

之前我们分享过一些CSS3卡通形象,比如SVG HTML5可爱的小鸟卡通动画。这次我们分享的纯CSS3卡通人物也非常可爱,他们会一直在那里弹跳,弹跳时身体也像弹簧一样运动,感觉非常逼真,具体动画大家可以从演示页面中体验。

css3-cartoon-jump-animation

在线演示源码下载

可爱的CSS3圆盘时钟动画

之前我们分享过一些基于CSS3和jQuery的圆盘时钟,比如纯CSS3实现圆盘时钟动画HTML5/CSS3时尚的圆盘时钟动画。今天要分享的也是一款可爱的CSS3圆盘时钟动画,时钟背景是乳白色的,显得非常干净,另外,时钟也可以和你本地的时候保持同步。

css3-circle-clock

在线演示源码下载

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

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

css3-sprite-zombie-walking

在线演示源码下载