文档章节

8个前沿的 HTML5 & CSS3 效果(附源码)

wewelove
 wewelove
发布于 2014/08/08 08:04
字数 981
阅读 187
收藏 4

作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握。前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身手。这篇文章挑选了8个前沿的 HTML5 & CSS3 效果,希望对你有所帮助。 

1.  HTML5 模拟现实物理效果 

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



源码下载  /  在线演示 

2.  实现各种 CSS3 文本动画效果 

这个插件集成了一些非常好的 JavaScript 库,提供一个方便使用的文本动画插件,可以让你为网页中的文字运用各种动画。 



在线演示   源码下载 

3.  离开你网站时显示模态弹窗 

Ouibounce 是一个微小的库,用于实现在用户离开你的网站的时候显示一个模式窗口。这个库可以帮助你增加着陆页的转换率。 Ouibounce 会在当鼠标光标移动到接近(或通过)视口(viewport)的顶部的时候触发。 



源码下载  /   在线演示 

4.  实现各种好看的阴影效果 

Shine.js 是一个用于实现漂亮阴影的 JavaScript 库。您可以设置动态光的位置,可定制的阴影。不依赖于第三方库,兼容 AMD。能在支持 textShadow 或 boxShadow 的浏览器中正常使用,如果有需要会自动添加前缀。 



源码下载  /   在线演示 

5.  表单填写进度提示效果 

Fort.js 是一款用于时尚、现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单。提供了Default、Gradient、Sections 以及 Flash 四种效果,满足开发的各种场合需要。 



源码下载  /   在线演示 

6.  HTML5 WebGL 实现逼真的云朵效果 

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



源码下载  /   在线演示 

7.  带有数字显示的加载进度条效果 

有的时候,在我们的应用程序中,我们希望能够显示特定任务的百分比进度。这里分享的这款小巧的 JavaScript 插件就是实现这个功能,易于使用和定制,而且是是免费开源的。 



立即下载  /   在线演示 

8.  自适应的占位符效果 

在早期,我们都是通过使用 JavaScript 来实现占位符功能。而现在,HTML5 原生提供的 placeholder 属性让我们在现代浏览器轻松就能实现这样的功能。这里向大家分享一个自适应的占位符效果(Adaptive Placeholder),当你输入的时候,提示文字不会消失,而是以动画的方式移动到了输入框的上方。 



源码下载  /   在线演示 


本文转载自:http://www.iteye.com/news/29195

共有 人打赏支持
wewelove
粉丝 4
博文 20
码字总数 7090
作品 0
昆明
高级程序员
私信 提问
9款超绚丽的HTML5/CSS3应用和动画特效

HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单、按钮、图片...

切切歆语
2017/10/23
0
0
推荐六款炫酷的HTML5效果插件

1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和HTML5 3D动画...

tower1229
06/26
0
0
精选9个值得学习的 HTML5 效果【附源码】

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

赵小宾
2014/11/27
0
0
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员
04/25
0
0
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux虚拟机安装VmwareTool

1.点击虚拟机: 2.点击安装Vmware-Tools,出现如下界面,将圈起来的拖动到桌面 3.接着打开终端,执行解压缩命令 tar -xzv -f VMwareTools-10.2.5-8068393.tar.gz 这个后面的VMwareTools-10.2....

陈刚生
29分钟前
1
0
Java学习笔记(1) --JSE 、JEE、 JME三者的区别

java SE : java standard edition , JSE。它允许允许开发和部署在桌面、服务器、嵌入式环境和实时环境中使用的java应用程序。 java SE包含了java Web 服务开发的类,并为java platform ,e...

hellation_
31分钟前
3
0
kafka 环境配置

https://www.cnblogs.com/fly-piglet/p/7762556.html

steel7c4
35分钟前
1
0
关于人工智能的思考

像人类一样可以思考,可以创造的人工智能会出现吗? 个人认为:会出现。但是出现的时间,取决了于硬件架构,和运算架构实现的时候。原因在于,人类智能可以出现,机器智能为什么不可以呢,不...

janl
36分钟前
1
0
破界!Omi生态omi-mp发布,用小程序开发生成Web

omi-mp 是什么 Omi 框架是微信支付线研发部和 AlloyTeam 开源的通用 Web 组件化框架,基于 Web Components,用来开发 PC、手机浏览器或者微信、手Q webview 的 Web 页面。自今年5月开源以来,...

腾讯开源
40分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部