爱前端网
16个超酷的CSS3动画按钮
1爱前端网 - Yang 发布于 2021-11-09
今天要给大家分享一组十分美妙的CSS3动画按钮集合，一共16个动画按钮，这16个按钮都会在鼠标滑过时生成不同的动画特效，有3D阴影、外框变幻、3D翻转、发光发亮等等。这些按钮最终的实现都是通过CSS3动画属性来完成的，CSS3动画本身并没有太复杂的属性样式，更多的是可以激发设计者...
阅读(1171)赞 (3)
标签：CSS3动画
纯CSS3 3D乒乓球比赛动画
1爱前端网 - Yang 发布于 2021-11-09
这是一个使用CSS3实现的3D乒乓球比赛动画，场面效果令人震撼，最关键的是，这个动画并没有使用一行JS代码，而是全部用HTML和CSS实现。画面中的乒乓球桌、球拍以及乒乓球都是通过CSS3绘制而成，包括球桌的阴影和乒乓球运动时的投影，3D效果表现得非常逼真。唯一不足的是，没有将比...
阅读(1327)赞 (4)
纯 CSS3 电风扇动画 可调节转速
1爱前端网 - Yang 发布于 2021-11-09
这又是一个用纯CSS3实现的模拟现实物品的动画特效，它是一个可以调节转速的电动风扇，电风扇动画分两部分，一部分是扇叶转动，另一部分是风扇水平摇头，跟现实中的台扇十分相似。另外，我们还可以通过按钮来调节转速，一共分为三档。同时还有一个开关按钮，和我们生活中的风扇控制方式基本一致。而...
阅读(1050)赞 (3)
纯 CSS3 3D 卧室动画
1爱前端网 - Yang 发布于 2021-11-09
这是一个用纯CSS3实现的3D卧室，卧室中家具齐全，有床、衣柜、书架，还有沙发等等。这些卧室中的元素都是通过CSS绘制而成的，并不是图片。另外，我们还可以通过鼠标移动来和卧室中的元素进行交互，比如将鼠标滑过书架中的书本时，书本会自动弹出，移开鼠标后又会自动藏在书架中。同样，衣柜的...
阅读(964)赞 (2)
CSS3 3D飞机飞行动画
1爱前端网 - Yang 发布于 2021-11-09
这是一个很酷的CSS3 3D飞机飞行动画，首先飞机模型、天空白云都是通过纯CSS3绘制的，鼠标可以控制飞机飞行的方向。另外鼠标点击天空时，还可以切换白天和黑夜，飞机在黑夜中飞行时会自动点亮机翼上的警示灯并且不断闪烁。更为炫酷的是，飞机还会时不时的做翻滚动作，不论是上下翻滚还是侧面...
阅读(949)赞 (1)
CSS3和SVG实现的水中映月的动画效果
1爱前端网 - Yang 发布于 2019-08-09
今天给大家分享一个宁静而又温馨的CSS3动画，是一个水中映月的场景，用CSS3和SVG实现。首先我们用CSS3在页面上画一个圆月，以及圆月周围的月晕，然后用SVG动画模拟水波，这样一轮圆月就倒映在水波荡漾的水面上了，个人以为还是挺逼真的。 在线演示 源码下载
阅读(3108)赞 (13)
纯CSS3模拟企鹅走路动画 超级可爱
1爱前端网 - Yang 发布于 2019-08-09
CSS3的出现让我们可以更加灵活地在网页上绘制一些图形，甚至是制作一些动画。这次我们要分享的是一款基于纯CSS3实现的企鹅走路模拟动画，企鹅的外观都是通过简单的HTML元素结合CSS绘制出来的，企鹅走路时的动画效果则是通过CSS3的动画属性实现的，非常可爱。类似的纯CSS3动物动...
阅读(2803)赞 (12)
纯CSS3绘制的任天堂Nintendo Switch游戏机
1爱前端网 - Yang 发布于 2019-08-09
CSS3真的非常强大，有了它我们的网页不再像以前那样横平竖直那么单调了。之前刚刚分享过一个纯CSS3模拟企鹅走路动画，这次我们分享一个纯CSS3绘制的任天堂Nintendo Switch游戏机，通过CSS3绘制了游戏机的外观，尤其是通过CSS3的阴影属性将游戏机的边角描绘出3D立...
阅读(3796)赞 (13)
CSS3 3D视差人物画像 可跟随鼠标摇头斜眼
1爱前端网 - Yang 发布于 2019-08-09
这次我们分享一个非常酷的CSS3动画。它是一个3D的视差人物画像，并且人物的头和眼睛可以跟随鼠标移动，如果在移动设备上的话，用手指移动屏幕也可以实现这个效果。更加厉害的是，这个人物画像在加载时是一幅素描画像，但是会逐渐变成油画的效果，你们可以研究一下这是如何实现的。 在线演示 源...
阅读(2325)赞 (9)
HTML5 Canvas圣诞节雪人球动画
1爱前端网 - Yang 发布于 2019-08-09
记得很早以前给大家分享过一个基于纯CSS3的可爱雪人动画，同时还伴随着下雪动画。今天我们来分享一个基于HTML5 Canvas的圣诞节雪人球动画，我们将雪人绘制到一个球中，然后点击鼠标将球抖动一下，球里面就飘起了雪花，非常的浪漫。 在线演示 源码下载
阅读(2389)赞 (9)
CSS3风速切换场景动画
1爱前端网 - Yang 发布于 2019-08-09
今天给大家分享一个基于CSS3的风速切换场景动画，首先页面上的场景画面是通过CSS绘制而成，总体来说是一个刮风天气场景，风车会转动，树叶也会随风飘摇。此时你可以通过一个开关来切换风速，风速变化的同时，风车的转速和树叶飘动的幅度也会随之变化，反应一个真实的刮风天气，而这一切都是通过...
阅读(2224)赞 (2)
纯CSS3超逼真的风车旋转动画
1爱前端网 - Yang 发布于 2019-08-09
很早以前，我们给大家分享过一款基于HTML5和CSS3的风车动画，效果还是不错的。这次我们介绍的同样是一个基于CSS3的风车旋转动画，只不过这个风车的元素更丰富，更像是在一个美丽的村庄中，一个风车在日落的渲染下不停的旋转工作。 在线演示 源码下载
阅读(1985)赞 (3)
CSS3自定义样式超链接按钮 鼠标滑过带动画特效
1爱前端网 - Yang 发布于 2019-08-09
超链接和按钮在网页中是最为基本的元素了，我们可以通过设置CSS样式将链接外观做一些简单的调整，比如文本大小、颜色和下划线。今天我们分享的一个基于CSS3的自定义样式超链接按钮，并且鼠标滑过链接后带有各种各样的动画特效。 在线演示 源码下载
阅读(2139)赞 (2)