标签归档:CSS3动画

纯CSS3红色爱心跳动动画

之前我们分享过一些基于纯CSS3的爱心动画,最酷的非浪漫程序员 HTML5爱心表白动画这个莫属,另外还有这个HTML5 3D爱心动画也非常不错。今天要给大家带来一个纯CSS3的红色爱心跳动动画,爱心的形状是利用纯CSS3绘制出来的,结合CSS3的动画属性实现跳动的动画特效。

pure-css3-heart

在线演示源码下载

纯CSS3实现可爱的表情动画

CSS3非常强大,我们可以利用CSS3相关特性绘制很多平面图形,并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画。一共有7组表情动画,我们可以在文章底部将这些表情用作读者看完文章的心情。

css3-expression-animation

在线演示源码下载

CSS3/SVG实现鼠标滑过3D展开文字描述图层

现在很多HTML5动画都会结合SVG来制作,因为SVG可以更方面地描述界面图形元素。今天要介绍的一款动画就是利用CSS3结合SVG实现的,它可以让我们在鼠标滑过图片时,通过3D立体的视觉效果展示文字描述图层,动画效果非常绚丽。

css3-svg-hover-3d-layer

在线演示源码下载

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

在线演示源码下载