html5效果源码,10款web前端值得学习的 HTML5 效果附源码

1.jQuery右侧Tab选项卡的焦点图插件

这是一款基于jQuery的焦点图插件,和之前介绍的jQuery焦点图插件类似,它以淡入淡出的动画方式来切换图片,该焦点图插件的特点是右侧有一排Tab选项卡,点击相应选项卡后即可切换对应的图片,应该说这款jQuery焦点图插件还是非常实用的。

e31bd613e1c7382b73555d8769fd601d.png

2.超炫 HTML5 粒子效果进度条

我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果。看着这么炫的 Loading 效果,即使让我多等一会也无妨:

3beee1cd538e5d42775a7726aa8fe214.png

3.HTML5 Canvas 模拟可撕裂布料效果

这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真。你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果。

bc121520bb7728ba8173df85933ee4f7.png

4.SVG 实现一个漂亮的页面预加载效果

展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果。对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊。

90db6eb8b12f03e29990c1204e4ae050.png

5.HTML5 制作疯狂的触手

这个示例叫疯狂的触手,移动鼠标可以进行涂鸦,点击鼠标可以清除画布。

5c8573b127eeff7de04fe2ed516887e4.png

6.WebGL 实现的水面特效实验

使用 WebGL 实现的水面特效实验,可放入一张照片,使用鼠标触动水面会有奇特效果。

d5082fab14e5e94c92518d6b3dc8b3a3.png

7.使用 CSS3 Transforms 构建圆形导航

在本教程中我将告诉你如何使用 CSS 变换来创建圆形导航。教程逐一讲解实现这个样式将要涉及一些基本的数学知识并配合 CSS 变换来创建这些样式。不过不用担心,这里用到的数学知识真的是很简单的。教程使用浅显易懂的语言来介绍数学逻辑,让你能够清晰的理解背后的技术。

85a6dc9098b094335ace537d01945f1a.png

8.Popline:帅气的浮动 HTML5 文本编辑器工具栏

Popline 是一个基于 HTML5 实现的富文本编辑器工具栏,设计灵感来自 PopClip ,相比传统的文本编辑器工具,Popline 能够浮动在编辑的文本周围,操作起来十分方便。

1d1cd5e66c876a4da24b067768a97cd1.png

9.S Gallery – 很有特色的响应式 jQuery 相册插件

S Gallery 是一款响应式的 jQuery 相册插件。使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用。这款插件它有一个特色功能:退出幻灯片模式回到网格视图模式,最后一张活跃的图片会以动画形式回到网格视图中的初始位置,因此用户知道他们浏览到画廊中的哪张图片上。

23ffca368aac2819a4f8599322bd9a2b.png

10.MasonJS – 创建完美的砌体结构网页布局

MasonJS 插件用来解决目前大多数的网格系统使用中的问题——间距。当使用 Masonry,Isotope 或任何其他网格插件时,布局中会出现空白或边缘参差不齐的情况。MasonJS 可以帮助你填补这些布局中的缺口。

17da8b64c16e7a76e1612f366afcf26f.png

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值