标签归档：CSS3动画

CSS3 3D飞机飞行动画

这是一个很酷的CSS3 3D飞机飞行动画，首先飞机模型、天空白云都是通过纯CSS3绘制的，鼠标可以控制飞机飞行的方向。另外鼠标点击天空时，还可以切换白天和黑夜，飞机在黑夜中飞行时会自动点亮机翼上的警示灯并且不断闪烁。更为炫酷的是，飞机还会时不时的做翻滚动作，不论是上下翻滚还是侧面翻滚，驾驶技艺确属一流。

在线演示源码下载

纯 CSS3 3D 卧室动画

这是一个用纯CSS3实现的3D卧室，卧室中家具齐全，有床、衣柜、书架，还有沙发等等。这些卧室中的元素都是通过CSS绘制而成的，并不是图片。另外，我们还可以通过鼠标移动来和卧室中的元素进行交互，比如将鼠标滑过书架中的书本时，书本会自动弹出，移开鼠标后又会自动藏在书架中。同样，衣柜的柜门也是如此。

在线演示源码下载

纯 CSS3 电风扇动画可调节转速

这又是一个用纯CSS3实现的模拟现实物品的动画特效，它是一个可以调节转速的电动风扇，电风扇动画分两部分，一部分是扇叶转动，另一部分是风扇水平摇头，跟现实中的台扇十分相似。另外，我们还可以通过按钮来调节转速，一共分为三档。同时还有一个开关按钮，和我们生活中的风扇控制方式基本一致。而如此复杂的逻辑却是用纯CSS3实现，真的非常厉害了。

在线演示源码下载

纯CSS3 3D乒乓球比赛动画

这是一个使用CSS3实现的3D乒乓球比赛动画，场面效果令人震撼，最关键的是，这个动画并没有使用一行JS代码，而是全部用HTML和CSS实现。画面中的乒乓球桌、球拍以及乒乓球都是通过CSS3绘制而成，包括球桌的阴影和乒乓球运动时的投影，3D效果表现得非常逼真。唯一不足的是，没有将比赛的队员表现出来，否则就真是完美了。

在线演示源码下载

CSS3卡通电子琴动画特效

4,207 人浏览

发表回复

2020-02-02 10:55:44

记得在很早以前，我们给大家分享过一个HTML5 SVG圆形钢琴动画，可以弹奏出美妙的琴音。今天给大家分享一个纯CSS3制作的卡通电子琴动画特效，它只是用CSS3绘制的电子琴外观，并不能弹出美妙的音乐，但是它由纯CSS3实现，因此可以当gif动画来展示。

在线演示源码下载

纯CSS3骏马奔腾动画特效带实现细节分析图

3,740 人浏览

发表回复

2019-09-21 16:31:40

还记得不久前给大家分享过的一个HTML5骏马奔跑动画吧，在动画中很好地模拟了骏马奔跑的细节，非常逼真。这次我们分享的也是一个纯CSS3骏马奔腾动画特效，它与前面一个相比，增加了奔跑时尘土飞扬的效果，同时当你点击骏马后，会出现实现该动画的细节分析图。

在线演示源码下载

CSS3自定义样式超链接按钮鼠标滑过带动画特效

7,230 人浏览

发表回复

2018-12-30 15:25:28

超链接和按钮在网页中是最为基本的元素了，我们可以通过设置CSS样式将链接外观做一些简单的调整，比如文本大小、颜色和下划线。今天我们分享的一个基于CSS3的自定义样式超链接按钮，并且鼠标滑过链接后带有各种各样的动画特效。

在线演示源码下载

纯CSS3超逼真的风车旋转动画

7,806 人浏览

发表回复

很早以前，我们给大家分享过一款基于HTML5和CSS3的风车动画，效果还是不错的。这次我们介绍的同样是一个基于CSS3的风车旋转动画，只不过这个风车的元素更丰富，更像是在一个美丽的村庄中，一个风车在日落的渲染下不停的旋转工作。

在线演示源码下载

CSS3风速切换场景动画

4,828 人浏览

发表回复

2018-12-29 14:18:16

今天给大家分享一个基于CSS3的风速切换场景动画，首先页面上的场景画面是通过CSS绘制而成，总体来说是一个刮风天气场景，风车会转动，树叶也会随风飘摇。此时你可以通过一个开关来切换风速，风速变化的同时，风车的转速和树叶飘动的幅度也会随之变化，反应一个真实的刮风天气，而这一切都是通过CSS3的动画特性来完成的。