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

5,799 人浏览

2017-11-04 14:24:42

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

在线演示源码下载

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

6,390 人浏览

发表回复

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

在线演示源码下载

超炫酷的SVG轮船行驶动画

7,657 人浏览

发表回复

2017-11-03 22:27:53

这又是一款非常酷的SVG动画，首先，我们利用SVG的路径特性绘制了一艘高大上的轮船，并且同时绘制了海面以及衬托海面的太阳，注意，你看到的画面中的所有元素都是SVG绘制而成。然后我们调用了简单的JavaScript让轮船在海面上摇摆行驶，看上去还是挺逼真的。

在线演示源码下载

HTML5 SVG圆形钢琴动画可模拟大部分音调

7,176 人浏览

发表回复

今天我们要给大家介绍一款之前从来没有分享过的HTML5 SVG动画，它是一个圆形的钢琴，注意它并不只是一个绘制的图形，它是可以弹奏的，我们只需将鼠标滑过相应的按键即可发出不同的钢琴音调，是不是很有趣？是不是觉得和之前介绍的Google电吉他如出一辙？

在线演示源码下载

华丽的HTML5/CSS3输入框聚焦发光动画表单

7,147 人浏览

发表回复

今天我们要给大家分享一款非常特别的登录表单，基于HTML5和CSS3。当表单加载的时候，会有一段等待加载的动画特效，表单加载完成后会以弹出的方式展现。另外这款登录表单最有趣的地方在于，当我们聚焦输入框时，该输入框会出现气泡发光的动画特效，这一切都是由JavaScript结合CSS3特性实现而成。

在线演示源码下载

CSS3文字跳动旋转动画

25,872 人浏览

发表回复

2017-11-02 19:02:47

今天我们要为大家分享一款基于CSS3的文字动画，这款文字动画展现的是可以跳动和旋转的字母文字。之前也有介绍过一些CSS3文字特效，比如HTML5 Canvas幻彩火焰文字特效和CSS3实现3D卡通文字效果都非常不错，今天的这款CSS3跳动文字特效希望你也会喜欢。

在线演示源码下载

基于Swiper.js的移动端图片滑块插件支持自动播放和拖拽

7,842 人浏览

发表回复

Swiper是目前较为流行的移动端内容滑块插件，底层是基于JavaScript的。今天要分享的这款Swiper.js移动端图片滑块插件功能十分强大，和其他jQuery焦点图插件类似，Swiper也提供图片滑动切换功能，并且支持左右箭头切换和悬浮图片上方的圆形链接点进行快速切换。另外，Swiper还支持自动播放或鼠标拖拽滑动。

在线演示源码下载

18个超有趣的SVG绘制动画赏析

74,025 人浏览

发表回复

2017-11-01 16:23:39

SVG作为时下比较新颖的技术标准，已经建立了很多基于SVG的前端项目。由于SVG在绘制路径上非常灵活，我们将很多网页上的元素使用SVG来绘制而成，有各种人物、小图标、小动画等等。今天我们收集了18个非常新奇有趣的SVG绘制动画，这些动画大部分都是使用SVG结合一定的CSS3特性实现而成，效果让人大为震撼，一起来看看吧。

1、HTML5 SVG实现会跳舞的花朵 4种跳舞心情

这又是一款很有趣的HTML5 SVG动画，它是一朵会跳舞的花。首先，花朵和花盆均采用SVG进行绘制，虽然是简单的线条以及单纯的颜色，但是绘制出的效果还是相当逼真的。接下来是给花朵进行跳舞动画的渲染，结合CSS3的动画属性以及JavaScript的动态渲染，让这朵花赋予了4种不同心情下的跳舞动画，点击按钮即可切换当前心情下的跳舞动画，真的是非常可爱。