标签归档:SVG

漂亮的CSS3/SVG个性化开关按钮

最近我们刚刚为大家分享过几款非常漂亮的CSS3自定义样式的开关按钮,比如这款超清新的3款纯CSS3自定义Checkbox开关纯CSS3灯光开关动画 自定义checkbox样式。这次要分享的同样是一款基于CSS3和SVG的个性化开关按钮,它的开关切换按钮是一个足球,通过足球的滚动来切换开关的状态,非常富有创意。

css3-svg-pretty-switch

在线演示源码下载

CSS3/SVG实现的任务列表 超酷的按钮点击动画

这是一款外观很漂亮的CSS3/SVG任务列表插件,我们可以在输入框中输入自己需要完成的任务名称,点击添加按钮后即可将任务添加到列表中去。这本来是一件非常普通的功能,但是利用CSS3和SVG,我们在添加按钮点击时出现非常炫酷的动画特效,这样的特效在任务添加到列表和删除列表中都同样会出现,非常不错。甚至我们可以将这款插件修改后变成一款非常华丽的评论插件。

css3-svg-todo-list

在线演示源码下载

CSS3/SVG自定义单选框Radiobox跳跃选择动画

这又是一款利用CSS3实现的自定义美化版Radiobox单选框,和之前分享的CSS3自定义发光radiobox单选框类似,这款Radiobox也是利用CSS3重写radiobox样式实现的。另外,这款自定义单选框还结合了SVG的特性,实现了单选框选中时的跳跃动画。

css3-svg-radiobox-animation

在线演示源码下载

SVG实现的一组超华丽Loading加载动画

Loading动画我们已经分享过很多了,大部分都是基于纯CSS3的,或者有些也有jQuery协助完成。比如这个10组蓝色风格的纯CSS3 Loading动画图标就非常实用。今天我们要分享的是一组基于SVG的超华丽Loading加载动画,利用SVG的路径特性,动态绘制形状和状态,从而产生Loading加载的视觉效果,同样也非常实用,因为现在所有浏览器都支持SVG了。

svg-wonderful-loading

在线演示源码下载

SVG/CSS3 3D阴影文字 阴影线条流动特效

今天我们给大家分享另外一款基于SVG和CSS3的文字动画,它们的特点是文字有阴影特效,呈现出3D立体的视觉效果,而且这不是一般的阴影,而是借助了SVG的路径绘制功能,将阴影线条化,并且阴影线条还可以随着鼠标的滑过而呈现流动的动画特效,你也可以对文字进行加粗。

svg-css3-3d-shaded-text

在线演示源码下载

CSS3/SVG火焰背景遮罩文字动画

之前我们分享过一些炫酷的带遮罩的CSS3文字动画特效,比如这款基于P5.JS的HTML5文字遮罩粒子动画就非常不错。今天要分享的也是一款CSS3遮罩文字动画,这次的遮罩是动态燃烧的火焰作为背景,同时也利用了SVG的路径功能绘制文字的镂空形状,非常炫酷。

css3-svg-fire-text

在线演示源码下载

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

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

svg-css3-3d-bike-running

在线演示源码下载

SVG玫瑰花盛开动画

SVG还是很强大的,我们之前也分享过很多利用SVG绘制出来的各种动画特效。比如超炫酷的SVG轮船行驶动画HTML5 SVG圆形钢琴动画都是用SVG实现的超酷动画。今天我们要分享另外一款基于SVG的玫瑰花盛开动画,当鼠标滑过玫瑰花时,玫瑰花就会缓缓盛开,情景非常浪漫。

svg-bloom-rose

在线演示源码下载

HTML5/SVG运动模糊动画 支持焦点图、弹出层和菜单

这次要分享的是一种基于HTML5和SVG的运动模糊的动画效果,比如在焦点图插件中图片切换时候的模糊效果,弹出层弹出时的模糊效果,还有下拉菜单展开收缩时的模糊效果。大部分我们使用CSS3的模糊属性以及HTML5实现的运动算法,让图片、菜单等元素实现在运动中的模糊动画特效,为了让运动模糊效果更加逼真,我们需要选择一个比较合理的运动算法公式。

html5-svg-motion-blur-effect

在线演示源码下载

SVG/CSS3自行车 模拟自行车行驶动画

之前我们为大家介绍过几款很酷的CSS3自行车动画,比如纯CSS3实现自行车动画特效纯CSS3 3D自行车动画。这次我们要分享的也是一款利用SVG路径特性和CSS3动画特性实现的自行车模拟行驶动画,自行车的外观是利用SVG路径绘制而成,再通过CSS3模拟脚踏板和轮胎的转动。

svg-css3-bike-running

在线演示源码下载