标签归档:CSS3动画

CSS3 3D足球队员对战布局图

这是一个不是很有用但却有点意思的CSS3 3D动画,这个动画主要是主场客场双方足球队的队员布局安排图,画面上呈现了一个3D足球场,双方队员的头像会出现在不同位置,点击每一位队员即可弹出该球员的详细信息。

css3-3d-football-field

在线演示源码下载

纯CSS3实现可爱的小蜜蜂动画

CSS3真的是非常受欢迎,我们可以利用CSS3绘制很多东西。就像这次要介绍的纯CSS3可爱的小蜜蜂动画,我们不仅利用纯CSS3代码绘制了蜜蜂的外形,而且还配备了眨眼和翅膀飞动动画,更让人惊叹的是,眨眼睛的频率模拟得非常真实,大家可以自己去演示页面体会一下。

css3-bee

在线演示源码下载

纯CSS3绘制的宝剑 可上下浮动

这是一款利用纯CSS3代码绘制的宝剑动画,整一把剑从剑柄刀剑梢都是用CSS3的相关属性实现的,其实绘制剑的轮廓还是比较简单的,比较有意思的是,这把剑还会慢慢地上下浮动,让这把剑更显得活灵活现,非常逼真。

css3-sword

在线演示源码下载

纯CSS3雷达扫描模拟动画

今天我们要为大家介绍一款非常新奇的CSS3动画插件,它模拟了雷达扫描的效果,并且还可以在屏幕上扫描出多个目标,可谓是模拟的相当逼真。更不错的是,这个相对复杂的效果是用CSS3实现的,因此在大部分现代浏览器上都可以模拟出扫描效果。

pure-css3-radar-scanning

在线演示源码下载

纯CSS3实现可感知方向的卡片翻转动画

今天我们要给大家分享一个看似简单但却非常有趣的纯CSS3动画特效,当我们将鼠标滑过一个个卡片时,卡片可以进行翻转,这个应该很容易,而且也很常见,你一定会说,这种翻转动画随便用CSS3特性就可以实现了。但是这款CSS3卡片翻转动画有一个独有的特点,就是它可以感知翻转的方向,也就是说它可以根据用户鼠标滑过的方向来决定翻转的角度,比如鼠标从上往下滑过,那卡片就垂直翻转,如果鼠标从左往右滑过,那卡片就水平翻转。你可以去研究一下它的CSS源码,对你学习CSS3会有很大的帮助。

pure-css-direction-aware-tile

在线演示源码下载

CSS3超炫酷圆形计时器进度条动画

今天要给大家分享一款非常炫酷的CSS3圆形计时器,这款圆形计时器也可以用来做进度条,非常实用。该计时器由2个圆环组成,分别代表秒和分,随着时间的推移,这两个圆环将逐渐被色彩填充满,并且每一秒的过程中都会有另外一个圆环进行颜色填充。

css3-circle-timer-prograss-bar

在线演示源码下载

纯CSS3绘制可爱的青蛙表情

之前我们分享过很多基于jQuery、CSS3和SVG的动画表情,比如一套HTML5/SVG表情图标HTML5/CSS3鬼脸表情下拉菜单。今天要分享另外一款超炫酷的CSS3青蛙表情,一共有12个表情,分别用青蛙的表情,有笑脸、也有生气的表情,非常可爱。

css3-frog-expression

在线演示源码下载

超绚丽CSS3多色彩发光立方体旋转动画

之前我们分享过几个不错的CSS3立方体动画,比如这款HTML5 3D立方体旋转动画HTML5 3D立方体图片切换动画。今天要分享的也是一款基于CSS3的3D立方体旋转动画,不同的是,这款立方体的每一个面都有不同的色彩,并且会带有绚丽的发光特效。

css3-shine-cube

在线演示源码下载

纯CSS3红色爱心跳动动画

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

pure-css3-heart

在线演示源码下载

纯CSS3实现可爱的表情动画

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

css3-expression-animation

在线演示源码下载