标签归档:CSS3动画

纯CSS3模拟iPhone X背景切换动画

尽管iPhone已经没有像以前那么火了,但是苹果的UI设计还是可以肯定的。今天我们要给大家分享一款基于纯CSS3的iPhone X背景切换动画,整体的切换动画以淡入淡出为主,iPhone X屏幕的背景和页面的背景交相呼应,显得非常自然和谐。

css3-iphone-x-background

在线演示源码下载

纯CSS3蓝色蝴蝶动画

之前我们分享过几个漂亮的HTML5蝴蝶飞舞动画,比如超炫酷HTML5 Canvas蝴蝶飞舞动画HTML5 SVG 3D蝴蝶飞舞动画都非常炫酷。今天要分享的这款蝴蝶动画是基于纯CSS3的,虽然没有前面蝴蝶动画那么绚丽,但是蓝色的蝴蝶翅膀扇动起来也是别有一番风味的。

pure-css3-blue-butterfly

在线演示源码下载

纯CSS3 3D自行车动画

今天我们要给大家分享一款纯CSS3实现的3D自行车动画,和之前分享的纯CSS3实现自行车动画特效纯CSS3实现自行车动画不同的是,这款是3D立体的自行车,而且可以360度旋转,自行车的每个面都可以观察清楚,效果非常不错。

pure-css3-3d-bike

在线演示源码下载

纯CSS3实现3D立方体焦点图切换动画

这是一款利用纯CSS3实现的3D立方体焦点图切换动画,是不是觉得很富有创意?图片一开始展示是平面的,但是定时会以3D立体的方式切换立方体面,从而达到切换图片的效果。和之前分享的HTML5 3D立方体旋转动画不同的是,它在图片切换时的动画并不是简单的旋转,而是那种富有节奏感的复杂运动。

pure-css3-3d-cube-slider

在线演示源码下载

CSS3小猫咪挂在绳索上摇摆动画

今天我们要给大家分享一款超萌的CSS3小猫咪动画特效,一只银白色的可爱小猫咪挂在绳索上,不停地左右摇摆,眼睛一眨一眨,尾巴摇摇摆摆,显得非常可爱。小猫咪是通过CSS3绘制的,摇摆的动画特效也是通过CSS3动画相关特性实现的。

css3-cat-swinging

在线演示源码下载

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

在线演示源码下载