标签归档:CSS3动画

CSS3实现的公司发展历程时间轴

今天我们要给大家分享一款CSS3和JavaScript实现的时间轴动画,这款时间轴动画有以下几个特点:1、页面加载完成后,时间轴会按节点逐步展开;2、可以自定义节点的数量和位置;3、拥有动态背景动画特效,就像飞舞的棉絮吸附着鼠标,非常炫酷。这款时间轴插件可以应用在公司发展历程功能上,更直观地介绍公司的发展历程。

css3-company-timeline

在线演示源码下载

纯CSS3精美样式的飘带特效

还记得之前我们分享过一些基于CSS3的飘带样式菜单吗?比如这款CSS3 飘带菜单 超酷3D CSS3菜单CSS3飘带状3D菜单 菜单带小图标。今天我们要给大家介绍另外一种CSS3飘带样式的特效,它非常适合在图片上标注一些文字描述,样式非常精美。

css3-ribbon-text

在线演示源码下载

纯CSS3实现阴阳太极动画

这是一款很有趣的纯CSS3小动画,它是我们中国人都非常熟悉的阴阳太极图案,整个图案是利用纯CSS3绘制而成,而且更酷的是,这个太极图案还会不断旋转,看上去非常的神秘。而且这个旋转动画特效也是利用CSS3的动画属性实现。

css3-yinyang-taichi

在线演示源码下载

CSS3 3D图片向上翻转渐隐消失动画

今天我们要来分享一款很不错的图片文字提示动画特效,当我们将鼠标滑过图片时,图片就会出现向上翻转,然后出现图片的文字介绍,这个过程中利用了CSS3的相关属性让图片逐渐变得透明,同时渲染出一种3D的视觉效果。

css3-image-flip-text

在线演示源码下载

纯CSS3 3D旋转立方体动画

之前已经为大家分享过几个非常炫酷的CSS3/HTML5立方体动画,比如这款HTML5 3D立方体旋转动画以及这款HTML5 3D立方体图片切换动画,效果都相当不错。这次要分享一个相对比较简单的纯CSS3 3D旋转立方体动画,初始化的时候会展示如何有平面生成一个立方体,生成完成后即在空间中自由旋转。

css3-3d-cube-rotate

在线演示源码下载

CSS3六边形图片网格布局

上次介绍过一个图片的瀑布流布局方式,这次再来分享一个基于CSS3的六边形图片网格布局方式,利用CSS3特性将图片绘制成六边形,然后图片之间互相拼接起来,类似一个蜂巢。另外还有一个特点是,当鼠标滑过图片时,图片上方会出现说明性的文字。

css3-image-grid-layout

在线演示源码下载

CSS3鼠标滑过图片3D旋转动画

这是一款非常实用的CSS3鼠标滑过图片3D旋转动画,当鼠标滑过图片时,图片就会出现具有立体感的旋转动画,为什么说它实用,因为它不仅仅时视觉上的炫酷效果,而且旋转后出现文字介绍,因此很多场景都可以用到这款CSS3图片旋转插件。

css3-3d-image-rotate

在线演示源码下载

纯CSS3绘制的旺仔头像动画

这是一个用纯CSS3绘制和实现的旺仔头像动画,非常的可爱。旺仔的人物形象是通过纯CSS3绘制的,同时你会发现旺仔的眼睛和头发还在不断的摆动,非常生动,这些动画也是通过CSS3的动画属性来实现的,非常的酷。

pure-css3-wangwang

在线演示源码下载

CSS3实现答题卡片抽取切换动画

之前我们分享过一些基于CSS3和jQuery的卡片动画,比如这款HTML5/CSS3卡片抽出动画CSS3/jQuery实现移动端滑动图片层叠效果。今天要介绍的也是一款基于CSS3的答题卡片抽取切换动画,当你答完一题后,答题卡就会抽出,新的答题卡就会切换成当前页面,动画效果非常不错。

css3-card-siphon-slider

在线演示源码下载

近50个纯CSS3绘制的图形和图标动画

CSS3确实非常强大,我们之前也领略过CSS3绘制的各种图形和实现的各种动画,比如非常逼真的CSS3人物行走动画,也比如这100多个纯CSS3动画图标。今天要分享的是用纯CSS3绘制的50多个图形和图标,有些图形还带有动画特效,与之前的100的小图标相比,这次的图形更为复杂,当然也更加漂亮。

css3-graph-icon

在线演示源码下载