分享8款最新超酷HTML5/CSS3特效及源码

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

澳门新浦京电子游戏 1

10个web炫酷的jQuery动画插件及源码,web炫酷jquery源码

1.基于jquery漂亮的按钮

今天给大家分享一款基于jquery漂亮的按钮。这款按钮背景下用了一张图片。当鼠标经过的时候背景用半透明div遮住。

澳门新浦京电子游戏 2

在线演示

源码下载

2.jquery自适应动态内容翻转特效

jquery自适应动态内容翻转特效

澳门新浦京电子游戏 3

在线演示

源码下载

3.多功能网页幻灯片jQuery Cycle

多功能网页幻灯片jQuery Cycle

澳门新浦京电子游戏 4

在线演示

源码下载

4.jQuery书本翻页3D动画特效

记得以前我们有介绍过不少书本翻页的动画,比如这款CSS3书本翻页动画,制作就非常逼真。今天要分享的这款jQuery书本翻页3D动画功能更加强大,可以支持任意数量页的翻阅,并且也有非常美观的视觉效果。书本的内容支持任意HTML元素,相当灵活。

澳门新浦京电子游戏 5

在线演示

源码下载

5.jQuery带闹钟闹铃的数字时钟

今天要分享的是一款基于jQuery的数字时钟,这款jQuery时钟的一大特点是可以设置闹铃,可以做一个很好的闹钟插件。点击闹钟设置按钮即可弹出一个对话框,你可以多少时间后激活闹铃,比如1分钟后激活,那么就在minutes中设置1。1分钟后,会弹出一个闹铃提示框,并伴随提示声音。

澳门新浦京电子游戏 6

在线演示

源码下载

澳门新浦京电子游戏 ,6.jQuery图片水平滑动延迟加载动画

这是一款基于jQuery的图片滑块插件,这款jQuery图片插件可以自定义水平滚动条,外观非常漂亮,当我们拖动滚动条时,图片即产生延迟加载,并在加载完后以各种动画的方式展示出来。另外,鼠标滑过图片时,图片下方会弹出一些描述文字。

澳门新浦京电子游戏 7

在线演示

源码下载

7.jQuery鼠标悬停图片分享按钮动画

这是一款基于jQuery的图片动画插件,这款jQuery插件可以实现鼠标滑过图片时在图片上方创建任意的元素,包括分享按钮和图片文字描述等。这些按钮和文字可以悬浮在图片的任意位置,同时你也可以自己定义这些图片上方的元素出现时的动画特效。

澳门新浦京电子游戏 8

在线演示

源码下载

8.jQuery水平滑动菜单 可筛选菜单项

今天我们要来分享一款很特别的jQuery菜单,整一个菜单项都是可以水平滑动的,并且每一个菜单项都有一个卡通的图标,非常可爱。另外,菜单项可以根据不同的分类筛选,很适合菜单项繁杂的网页应用,可以让菜单项整齐归类。

澳门新浦京电子游戏 9

在线演示

源码下载

9.jQuery灯光投影动画特效

今天我们要分享一款基于jQuery的灯光投影动画特效,当你滑动鼠标时,投影就会跟随鼠标的方向移动,非常真实地模拟的现实世界中灯光投影的方向性特点,当然这其中也有利用CSS3的阴影特性,鼠标跟随是利用jQuery实现的。

澳门新浦京电子游戏 10

在线演示

源码下载

10.jQuery文字描述悬浮焦点图宽屏展示

这次我们要来分享一款jQuery焦点图插件,这款jQuery焦点图插件有2个特点,第一是焦点图以宽屏的形式展现,第二是焦点图的图片上方悬浮着文字描述,并且可以在文字描述上点击切换按钮。焦点图整体非常大气,不仅可以通过左右按钮来切换,而且可以点击下面的按钮来切换至任意图片。

澳门新浦京电子游戏 11

在线演示

源码下载

相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容。今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的朋友可以下载使用。

这次我们整理了8款最新的HTML5/CSS3特效及源码,这些特效包括HTML5文字特效、HTML5焦点图特效、CSS3/HTML5进度条特效等类型,一起来看看吧。

网上下载的带特效的jquery插件怎使用?

项目的webapp下创建一个目录,比方起名叫jquery,
在jquery下面建立js、css、images三个目录,然后分别把对应的js文件放到js下、css文件放到css下,images/*放到images下。
在你要使用的页面头部追加对三个js的引用。
然后把插件例子中<script
text=”text/javascript”>$(function(){****};</script>这部分放到这个页面的头部,ok。
 

1、jQuery书本翻页3D动画特效

今天要分享的这款jQuery书本翻页3D动画功能更加强大,可以支持任意数量页的翻阅,并且也有非常美观的视觉效果。书本的内容支持任意HTML元素,相当灵活。

澳门新浦京电子游戏 12

在线演示 
      源码下载

1、CSS3/jQuery全屏立体焦点图 时尚大气

一个ajax+jquery+webserver 开发的购物网站源码系统

亲~ 请去 猪八戒(威客) 网站,看下这样的网站多少钱.
希望你能了解下,程序员写代码不是廉价,
如果有编程能力,去 51aspx 下载个,自己改改吧.
 

1.基于jquery漂亮的按钮
今天给大家分享一款基于jquery漂亮的按钮。这款按钮背景下用了…

2、CSS3书本翻页动画 书本翻页效果逼真

今天我们要分享一款炫酷而且实用的CSS3动画效果,它是模拟书本翻页的动画特效。当鼠标滑过书本右上角时,书本即可向前翻一页,而且翻页动画非常逼真。由于CSS3的运用,我们并不需要使用复杂的图片来制造逼真的书本效果,书本翻页可以很简单地完成。

澳门新浦京电子游戏 13

在线演示 
      源码下载

jQuery是一个非常流行的Javascript框架,今天我们要分享一款基于jQuery和CSS3的焦点图动画,该jQuery焦点图插件是全屏立体的效果,看上去非常时尚和大气。而且,焦点图在图片滑动的时候非常流畅,性能应该也还不错。

3、HTML5电子书翻页动画特效

今天我们要来分享一款很酷的HTML5电子书翻页动画特效,这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果,也可以点击书页的边框来快速翻页。

澳门新浦京电子游戏 14

在线演示 
      源码下载

在线演示 源码下载

4、HTML5 3D书本翻页特效 3D效果比较漂亮

利用HTML5和CSS3实现3D效果真的非常方便,下面这款书本翻页特效就很好地利用了HTML5的3D特性。鼠标拖拽书本页面即可翻动页面,在翻页的过程中整本书还呈现出3D立体的效果,包括书本中的图片也十分立体。

澳门新浦京电子游戏 15

在线演示   
    源码下载

2、HTML5/CSS3文字投影特效 乳白阴影文字效果

5、HTML5/CSS3书本翻页3D动画

前段时间我们分享过很多牛叉的HTML5动画,如果你对HTML5感兴趣,可以移步至HTML5动画欣赏学习。今天我们要分享一款基于HTML5和CSS3的书本翻页3D动画,当我们将鼠标滑过书本时,书本就会自动一页页翻过去,书本的3D效果非常不错。

澳门新浦京电子游戏 16

在线演示 
      源码下载

之前向大家分享过一款HTML5
Canvas字母文字颗粒动画,效果非常不错,由此可见,利用HTML5和CSS3可以方便的实现很多以前很难实现的文字特效。今天我要向大家介绍一款HTML5/CSS3文字投影特效,它的使用也很简单,HTML5文字阴影效果也比较酷。

6、jQuery/CSS3书本翻页动画特效

这是一款基于jQuery和CSS3的书本翻页动画特效,该书本翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用。我们可以点击左右翻页按钮进行翻页,也可以使用鼠标拖拽页脚来实现翻页动画。这是个jQuery插件,因此兼容性还不错。

澳门新浦京电子游戏 17

在线演示   
    源码下载

以上就是6款超炫酷的HTML5电子书翻页动画,希望你会喜欢。

在线演示 源码下载

3、HTML5/CSS3实现旋转图片播放焦点图 旋转比较流畅

HTML5焦点图可以实现很多炫酷的效果,就像这款CSS3百叶窗焦点图特效就很不错。今天我们再来分享一款另外一种效果的HTML5焦点图插件,该焦点图利用CSS3的属性实现了图片旋转的动画效果,既可以顺时针旋转,也可以逆时针旋转,并且图片旋转也比较流畅。

在线演示 源码下载

4、HTML5 Canvas Google电吉他 支持键盘弹奏

这是当年Google为纪念莱斯·保罗而设计的Google首页Logo,它利用HTML5技术实现了电吉他弹奏效果。这款HTML5电吉他不仅可以鼠标滑过琴弦发出音乐声,而且可以利用键盘来弹奏出美妙的乐章,懂音律的朋友可以弹奏一下试试。

在线演示 源码下载

5、HTML5 Canvas字母文字颗粒动画 可设置重力感应

网页文字在一般情况下只能设置颜色、大小、粗细等基本的特征,但是利用HTML5技术,我们可以让网页文字变得更加绚丽和动感。今天要分享的这款HTML5
Canvas字母文字动画效果很不错,它可以让26个英文字母实现颗粒跳动的效果,你不仅可以设置需要播放动画的字母,也可以设置不同的效果方式,而且也可以设置重力感应效果,是一款非常不错的HTML5文字特效。

在线演示 源码下载

6、HTML5 3D书本翻页特效 3D效果比较漂亮

利用HTML5和CSS3实现3D效果真的非常方便,下面这款书本翻页特效就很好地利用了HTML5的3D特性。鼠标拖拽书本页面即可翻动页面,在翻页的过程中整本书还呈现出3D立体的效果,包括书本中的图片也十分立体。

在线演示 源码下载

7、HTML5折线图表Aristochart 图表配置简单

之前我已经向大家分享了几款HTML5图表应用,HTML5
Canvas图表应用RGraph、HTML5
Canvas饼状图表。利用这些HTML5图表可以很方便的展示各种数据,而且非常直观。今天要向大家分享一款HTML5折线图表插件Aristochart,Aristochart扩展非常灵活,配置也比较简单,是一款很实用的HTML5图表应用。

在线演示1 在线演示2 在线演示3 在线演示4 源码下载

8、CSS3 Loading进度条加载动画特效 3款绚丽风格

前面我向大家分享了几款非常漂亮的CSS3进度条插件,CSS3 SVG 进度条 Loading
动画、纯CSS3进度条
华丽5色进度条示例。今天我要分享一款更加炫酷的CSS3进度条加载动画特效,该动画特效有3个不同的风格,注意,IE6,7,8是不支持该进度条动画的。

在线演示 源码下载

好了,以上这8款绚丽而又实用的HTML5/CSS3最新应用应该能帮助到你的开发上,欢迎收藏分享。

本文由html5tricks收集整理,转载请务必保留原文链接

发表评论

电子邮件地址不会被公开。 必填项已用*标注