你的位置:首页 > 网页设计

[网页设计]10款web前端基于html5/CSS3应用特效


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

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

10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 1

在线演示

源码下载

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

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

10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 2

在线演示

源码下载

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

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

10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 3

在线演示

源码下载

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

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

10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 4

在线演示

源码下载

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

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

10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 5

在线演示

源码下载

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

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

10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 6

在线演示

源码下载

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

SlickMap CSS是一款利用CSS文件直接将网站地图(sitemap)转换为可视化网页图表导航的CSS框架,它可以让一个枯燥的sitemap

10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 7

在线演示

源码下载

8.jQuery滑动杆实现购买日期选择

这是一款基于jQuery的滑动杆购买日期选择插件,它的外观仿的是阿里云的服务器购买日期选择界面。这款jQuery插件非常适合在一些虚拟产品购买页面上使用,它可以帮助你的用户快速选择产品的购买日期,十分方便。

10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 8

在线演示

源码下载

9.CSS气泡提示框 可自定义配置箭头

今天我们要来分享一款基于纯CSS的气泡提示框,和之前分享的一款jQuery消息提示框插件Tipso类似,整个提示框由箭头和矩形框组成,并且气泡提示框的箭头可以有不同的方向。这款CSS气泡提示框由纯CSS完成,最大的特点就是可以自定义配置,包括文字颜色、背景颜色和箭头方向等。

10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 9

在线演示

源码下载

10.jQuery模拟抛物线轨迹动画

利用jQuery和HTML5可以模拟很多数学中的函数图象,比如HTML5 Canvas正弦波动画。今天我们要介绍一个用jQuery实现简单的模拟抛物线轨迹的插件,可以开始和暂停抛物线的运动,以及重新设置抛物线的参数。

10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 10

在线演示

源码下载

本文固定链接: http://www.i7758.com/archives/2230.html