精选9个值得学习的 HTML5 效果

此文转自:http://www.cnblogs.com/lhb25/p/9-html5-effects.html,仅供本人学习参考,版权归原作者所有!

精选9个值得学习的 HTML5 效果【附源码】

  这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的Web 应用。

超炫 HTML5 粒子效果进度条

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

源码下载      在线演示

HTML5 Canvas 模拟可撕裂布料效果

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

源码下载      在线演示

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

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

源码下载      在线演示

结合 CSS3 & Canvas 模拟人行走的效果

  HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了 Web 开发人员的激情。所谓只有想不到,没有做不到,的确如此。下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的动画效果。

源码下载      在线演示

HTML5 高仿逼真 3D 布料图案效果

  HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大。下面给大家分享一个 HTML5 Canvas 绘制的 3D 布料图案效果。

源码下载      在线演示

HTML5 模拟现实物理效果

  Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动。玩法介绍:可以随意拖动圆球、点击页面背景、晃动浏览器、双击页面背景或者按住鼠标左键,有不同的效果,赶紧来体验一下。

源码下载     在线演示

HTML5 WebGL 实现逼真的云朵效果

  使用 HTML5 WebGL 实现超逼真的云朵效果。WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示。

源码下载      在线演示

HTML5 制作疯狂的触手

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

源码下载      在线演示

WebGL 实现的水面特效实验

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

源码下载      在线演示

时间: 2024-08-09 15:41:14

精选9个值得学习的 HTML5 效果的相关文章

精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果.HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强.效果丰富的Web 应用. 超炫 HTML5 粒子效果进度条 我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:) 源码下载      在线演示 HTML5 C

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

1.jQuery右侧Tab选项卡的焦点图插件 这是一款基于jQuery的焦点图插件,和之前介绍的jQuery焦点图插件类似,它以淡入淡出的动画方式来切换图片,该焦点图插件的特点是右侧有一排Tab选项卡,点击相应选项卡后即可切换对应的图片,应该说这款jQuery焦点图插件还是非常实用的. 在线演示 源码下载 2.超炫 HTML5 粒子效果进度条 我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loa

值得学习的C/C++开源框架(转)

值得学习的C语言开源项目 - 1. Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的性能,最多可以模拟3万个并发连接去测试网站的负载能力.Webbench使用C语言编写, 代码实在太简洁,源码加起来不到600行. 下载链接:http://home.tiscali.cz/~cz210552/webbench.html - 2. Tinyhttpd tinyhttpd是一个超轻量型Ht

PHP语言学习之html5的学习,一周总结

通过这周的html5的学习我整理了一下一些东西和一些总结 写代码的时候也开头都要对齐这样开起来很舒服,这些都是用到缩进键搞定的,比如<html></html>在一块写,要前后对齐,这样容易发现错误,而且看起来比较清晰 写代码是还有英文和中文的标点符号的问题,这些都要是注意的,(这基本是我在学习的时候遇到的问题) 要掌握好重要的标签,这样能够更好的学习.... 开始学习html 5 什么是html5HTML是由W3C的维护的 HTML是大小写不敏感的,HTML与html是一样的 HT

2014年值得学习的25个PS CS6教程(一)

热爱PS的朋友看过来~~~下面跟大家推荐10个高端大气上档次的PS教程(都是英文的哦) 1.为4D电影创建一副3D海报 2.制作3D水果文字 3.肖像图混合数字工艺 4.‘Doctrich – Post Apocalyptic Scientist Mechanic’ 5.制作独一无二的草木文字效果 6.用长颈鹿制作字体 7.制作高大上的3D文字效果 8.给你的图片加上宇宙效果 9.God loves FX ray (链接无) 10.爱丽丝的梦幻世界 2014年值得学习的25个PS CS6教程(一

HTML5学习总结——HTML5入门与新增标签

一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序(RIA)对 Flash, Silverlight, JavaFX 一类浏览器插件的依赖. 1991年HTML1.0标准出现1997年HTML4.0发布,4.0标准下的浏览器局限性Flash (安全与稳定堪忧.耗电.触摸.不开放)SilverlightJavaApplet2008年HTML5出现, W

go语言值得学习的开源项目推荐

谷歌官方维护了一个基于go语言的开源项目列表: https://github.com/golang/go/wiki/Projects 其中有非常多的优秀项目值得学习,有几百行代码适合新手阅读的项目,也有大型如nsq.docker等的项目. 下面推荐几款适合学习的项目: 1.cache2go https://github.com/muesli/cache2go 比较简单的一个缓存库,代码量很少,适合新手学习,可以学习到锁.goroutines等. 2.groupcache https://gith

很值得学习的java 画图板源码

很值得学习的java 画图板源码下载地址:http://download.csdn.net/source/2371150 package minidrawpad; import java.awt.*; import java.awt.event.*; import java.io.InputStreamReader; import java.io.Reader; import javax.swing.*; // 主界面类 public class DrawPad extends JFrame i

是什么让C#成为最值得学习的编程语言

随着 Web.iOS.Android.智能设备的流行,新的编程语言纷纷涌现并表现不俗,如 Ruby,Python,Scala,Go,Node.js,Swift 等.反观已经发展了近20年的 C# 语言(或者这里应该更准确的说是 .Net Framework),因为天生的平台局限,导致很多的 C# 程序员为了生计和前途纷纷转行投入的新语言的怀抱. 就在此时,微软的 .Net Core 横空出世 跨平台:可以在 Windows.MacOS 和 Linux 上运行. 兼容性: .NET Core 通过