10款web设计特效插件

阅读：2164 添加日期：2021/3/27 23:30:26 原文链接：https://www.toutiao.com/item/6203918587913404930/

1.jQuery百叶窗效果焦点图多种百叶窗动画方式

对于百叶窗动画效果，我们介绍的不是很多，目前就介绍过一款[color=rgb(68, 68, 68) !important]CSS3百叶窗图片切换。这次要给大家带来一个基于jQuery的多种百叶窗动画效果焦点图，焦点图的切换伴随随机的百叶窗动画，每一种百叶窗动画都非常精巧，当然你也可以定义自己的百叶窗动画，将其加入动画列表中。

10款web设计特效插件

在线演示
:http://www.html5tricks.com/demo/jquery-shutter-silder/index.html

源码下载
:http://www.html5tricks.com/download/jquery-shutter-silder.rar

2.jQuery多层级垂直手风琴菜单

之前我们分享过一款类似的jQuery垂直手风琴菜单CSS3手风琴菜单下拉展开带弹性动画，这次分享的这款手风琴菜单是多层级的，你可以通过HTML结构生成任意层级的菜单。由于是基于jQuery的，因此这款手风琴菜单的兼容性还不错。

10款web设计特效插件

在线演示
:http://www.html5tricks.com/demo/jquery-level-accord-menu/index.html

源码下载
:http://www.html5tricks.com/download/jquery-level-accord-menu.rar

3.纯CSS3实现幽灵漂浮动画

这又是一款基于纯CSS3的动画特效，先是用CSS3绘制了一个“可爱”的幽灵，没用运用图片，其实用CSS3绘制一些简单的线条和图形非常简单。然后通过CSS3的动画属性对幽灵进行上下的漂浮，动画效果还是非常不错的。

10款web设计特效插件

在线演示:
http://www.html5tricks.com/demo/pure-css3-ghost-float/index.html

源码下载：
http://www.html5tricks.com/download/pure-css3-ghost-float.rar

4.jQuery加入购物车商品飞入动画

现在网上商城很多，每一个网上商城都会有将商品加入购物车的功能，本文将要分享一个用jQuery实现的加入购物车商品飞入动画，与其他加入购物车效果不一样的是，当点击加入购物车，商品会自动飞入购物车里面，并通过抖动购物车来提示用户操作成功。

10款web设计特效插件

在线演示
:http://www.html5tricks.com/demo/jquery-add-to-cart/index.html

源码下载
:http://www.html5tricks.com/download/jquery-add-to-cart.rar

5.CSS3可旋转的卡通小鸟头像

这是一款很可爱的CSS3动画，关于[color=rgb(68, 68, 68) !important]HTML5小鸟的动画，大家可以去看看这个SVG HTML5可爱的小鸟卡通动画。今天要分享的这个也是基于纯CSS3实现的，只要我们将鼠标滑过小鸟头像，小鸟就会出现旋转的动画效果，非常可爱。

10款web设计特效插件

在线演示
:http://www.html5tricks.com/demo/css3-bird-avatar/index.html

源码下载
:http://www.html5tricks.com/download/css3-bird-avatar.rar

6.jQuery悬浮标题的幻灯片播放焦点图淡入淡出动画

关于jQuery焦点图插件，html5tricks已经为大家分享过很多了。今天我们要来介绍一款很普通但相当实用的jQuery悬浮标题的幻灯片播放焦点图，焦点图十分简易，每张图片都可以有一个标题和简介内容，这些文字内容悬浮在图片下方。图片切换时也是简单的淡如淡出动画，这用jQuery是很容易实现的。

10款web设计特效插件在线演示
:http://www.html5tricks.com/demo/jquery-slider-float-title/index.html

源码下载
:http://www.html5tricks.com/download/jquery-slider-float-title.rar

7.CSS3网站地图可视化生成器

SlickMap CSS是一款利用CSS文件直接将网站地图(sitemap)转换为可视化网页图表导航的CSS框架，它可以让一个枯燥的sitemap XML文件或者HTML文件转换成让人容易理解的组织架构图，让你对网站有个一目了然的了解。然后SlickMap CSS是自动化的，您自需要用XML或者HTML元素将站点地图结构描述好，SlickMap CSS会帮你直接渲染。

10款web设计特效插件