9款样式各异的web前端插件

1.10个样式各异的ReactJS水平滑杆插件

之前我们分享过很多基于jQuery和CSS3的水平滑杆插件,比如漂亮的jQuery UI水平滑杆和jQuery/CSS3带Tooltip的滑杆动画都相当实用。今天要介绍的也是一款水平滑杆插件,不过它是基于ReactJS的,当然也运用了大量的CSS3特性来渲染各种样式,一共有10种不同风格。

在线演示

源码下载

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

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

在线演示

源码下载

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

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

在线演示

源码下载

4.超炫酷的SVG轮船行驶动画

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

在线演示

源码下载

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

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

在线演示

源码下载

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

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

在线演示

源码下载

7.CSS3文字跳动旋转动画

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

在线演示

源码下载

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

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

在线演示

源码下载

9.HTML5 Canvas幻彩火焰文字特效

之前我们分享过很多基于Canvas的火焰渲染动画特效,比如这款HTML5 Canvas炫酷的火焰风暴动画和这个HTML5动感的火焰燃烧动画特效。这次来分享一款很特别的HTML5文字特效,文字同时是利用火焰来渲染的,并且燃烧的文字火焰还可以随时改变颜色,让文字更显幻彩。

在线演示

源码下载

未经允许不得转载:爱前端网 » 9款样式各异的web前端插件

赞 (4) 打赏


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏