标签归档:SVG动画

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

在线演示源码下载