标签归档:CSS3动画

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

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

css3-hyperlink-animation

在线演示源码下载

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

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

pure-css3-windmill

在线演示源码下载

CSS3风速切换场景动画

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

css3-windy-switch

在线演示源码下载

HTML5 Canvas圣诞节雪人球动画

记得很早以前给大家分享过一个基于纯CSS3的可爱雪人动画,同时还伴随着下雪动画。今天我们来分享一个基于HTML5 Canvas的圣诞节雪人球动画,我们将雪人绘制到一个球中,然后点击鼠标将球抖动一下,球里面就飘起了雪花,非常的浪漫。

html5-canvas-snow-globe

在线演示源码下载

CSS3 3D视差人物画像 可跟随鼠标摇头斜眼

这次我们分享一个非常酷的CSS3动画。它是一个3D的视差人物画像,并且人物的头和眼睛可以跟随鼠标移动,如果在移动设备上的话,用手指移动屏幕也可以实现这个效果。更加厉害的是,这个人物画像在加载时是一幅素描画像,但是会逐渐变成油画的效果,你们可以研究一下这是如何实现的。

svg-css3-parallax-portrait

在线演示源码下载

纯CSS3绘制的任天堂Nintendo Switch游戏机

CSS3真的非常强大,有了它我们的网页不再像以前那样横平竖直那么单调了。之前刚刚分享过一个纯CSS3模拟企鹅走路动画,这次我们分享一个纯CSS3绘制的任天堂Nintendo Switch游戏机,通过CSS3绘制了游戏机的外观,尤其是通过CSS3的阴影属性将游戏机的边角描绘出3D立体的视觉效果。

pure-css3-nintendo-switch

在线演示源码下载

纯CSS3模拟企鹅走路动画 超级可爱

CSS3的出现让我们可以更加灵活地在网页上绘制一些图形,甚至是制作一些动画。这次我们要分享的是一款基于纯CSS3实现的企鹅走路模拟动画,企鹅的外观都是通过简单的HTML元素结合CSS绘制出来的,企鹅走路时的动画效果则是通过CSS3的动画属性实现的,非常可爱。类似的纯CSS3动物动画之前也分享过一些,比如这个纯CSS3绘制可爱的神奇宝贝也非常不错。

pure-css3-penguin-walking

在线演示源码下载

CSS3和SVG实现的水中映月的动画效果

今天给大家分享一个宁静而又温馨的CSS3动画,是一个水中映月的场景,用CSS3和SVG实现。首先我们用CSS3在页面上画一个圆月,以及圆月周围的月晕,然后用SVG动画模拟水波,这样一轮圆月就倒映在水波荡漾的水面上了,个人以为还是挺逼真的。

css3-svg-water-moon

在线演示源码下载

纯CSS3模拟谷歌Loading加载动画

我们已经为大家分享过很多基于纯CSS3的Loading加载动画了,大部分都是一些简单的几何图形组合而成的循环播放动画,例如这个纯CSS3方块翻转效果的Loading加载动画就是通过简单的这方形叠加形成的动画。今天给大家带来另外一款模拟谷歌的纯CSS3 Loading加载动画,一共有6种动画效果。

pure-css3-google-loading

在线演示源码下载

纯CSS3流星雨动画

今天给大家分享一个很有意思的纯CSS3动画,它模拟了流星雨落下时的情景。这个动画正是利用了CSS3的一些新特性,包括直线的倾斜,颜色渐变等,不仅绘制出了很多流星图形,而且让这些流行随机地产生并滑过天空,效果非常不错。

pure-css3-meteor-shower

在线演示源码下载