标签归档:SVG动画

SVG结合CSS3实现的一套动画表情

很早以前我们为分享过一款很可爱的青蛙表情集合,大家的反应都还不错。这次我们要分享的是另外一种表情动画实现方式,就是通过SVG结合CSS3的方式来实现一套动画表情,利用SVG的路径功能绘制表情,然后通过CSS3来让表情产生动画效果。

svg-css3-face

在线演示源码下载

SVG和CSS3实现的爱心Like按钮

在现代网页中,我们经常可以在一些文章、视频和图片页面上找到”Like”按钮,并且通过点击该按钮来表示自己对该内容的喜欢或者不喜欢。大部分”Like”按钮是纯文本按钮或者图片按钮,如果你想让它们具有特别的动画特效,那么我们就需要用到CSS3或者JavaScript了。本文给大家带来一个带有爱心散列动画的Like按钮,主要采用了SVG和CSS3这两个技术。当你点亮Like按钮时,按钮的四周将会散发出多个五彩绚丽的爱心。

svg-css3-heart-like-button

在线演示源码下载

SVG/CSS3镂空3D自行车骑行动画

之前我们分享过一些基于CSS3和SVG的自行车动画,比如这款SVG/CSS3自行车 模拟自行车行驶动画纯CSS3 3D自行车动画都非常炫酷。今天我们要给大家介绍另外一款基于SVG的3D镂空自行车骑行动画,与前面自行车动画不同的是,这款自行车动画有一个运动员在骑行,同时自行车是镂空形状的,通过SVG线条渲染动态改变线条位置和颜色,让自行车凸显立体运动的视觉效果。

svg-css3-3d-bike-running

在线演示源码下载