16个超牛逼的HTML5和JavaScript特效

不用说， Flash的效果大家都清楚。实际上，HTML5和JavaScript拥有很多新属性，可以用它们来替代Flash。W3Cschool精选16个超牛逼的HTML5和JavaScript特效，看了这些特效，未来的Web发展前途无量。

1.特效：FlowerPower

创作者使用花朵作为画刷，以贝兹曲线方式绘图。

2.特效：Breathing Galaxies

动态变换直径及颜色，可通过鼠标或键盘产生新形状，这个效果不错!

3.特效：Noise Field

移动鼠标可改变粒子运动，点击可随机生成不同粒子效果。

4.特效：HTML5 Canvas粒子效果文字动画特效

W3Cschool利用HTML5，制造出了粒子效果文字动画特效。只要你输入框中输入想要展示的文字，回车后即可在canvas上绘制出粒子效果的文字动画，相当酷的动画效果。

5.特效：Swirling Tentacles

三维脉冲效果，沿着脉冲线有运动的颜色渐变模块。

6.特效：Keylight

双击生成两个以后的键即可发出声音，移动键的位置可产生不同的声音效果。W3Cschool上面有很多这样的教程，有兴趣可以去看一下！

7.特效：Rotating Spiral

旋转的螺旋效果，单击可以控制开始和停止旋转，是不是觉得高大上？

8.Blob

拖动水滴有重力效果，双击可以分离，小水滴碰到大水滴会合并。

9.Trail

彩色颗粒跟随鼠标运动效果，带尾巴淡出效果。

10.Graph Layout

一种交互的力向图布局效果，刷新三观。

11.Typographic Effects

使用HTML5 Canvas实现的文本特性，效果超过Flash。

12.Crazy Tentacles

移动鼠标可以进行涂鸦，点击鼠标可以清除画布，看着确实疯狂。

13.Nebula

吸引眼球的粒子系统，目的是测试WebGL性能，如果滑动鼠标，可以产生绚丽效果。

14.WebGL Globe

WebGL Globe 是一个开放的地理数据可视化平台，我们鼓励你复制代码，添加自己的数据，创建自己的应用。

15.Particle Playground

用鼠标和粒子进行交互，能发现不一样的精彩。

16.Surface

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

上面的HTML5和JavaScript特效，简直赶超Flash。W3Cschool上面有很多用户留言称HTML5和JavaScriptit将替代Flash，不过对于这种说法，也不知道怎么去评判。毕竟这些用户说的也是很有道理，你认为JavaScriptit会替代Flash吗?很想知道你的答案!

想要学习HTML5的更多技术特效，重庆千锋提供100%面授课程，两周面试试听，欢迎各位同学前来试听。

TML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML5 是最新的 HTML 标准。

HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

CSS 是一种描述 HTML 文档样式的语言。

CSS 描述应该如何显示 HTML 元素。
CSS 用于控制网页的样式和布局。
CSS3 是最新的 CSS 标准。
CSS3 被拆分为"模块"。主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。

1 标注效果

要实现如下效果：

HTML5:

<ruby>
少<rt>shào</rt>小<rt>xiǎo</rt>离<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt>
</ruby>，
<ruby>
乡<rt>xiāng</rt>音<rt>yīn</rt>无<rt>wú</rt>改<rt>gǎi</rt>鬓<rt>bìn</rt>毛<rt>máo</rt>衰<rt>cuī</rt>
</ruby>。

2 与文本换行相关的属性

	使用说明
line-break	用于指定如何（或是否）断行。除了Firefox，其它浏览器都支持。取值包括： auto，使用缺省的断行规则分解文本； loose，使用最松散的断行规则分解文本，一般用于短行的情况，如报纸； normal，使用最一般的断行规则分解文本； strict，使用最严格的断行原则分解文本。
word-wrap	允许长单词或URL地址换行到下一行。所有浏览器都支持。取值包括： normal，只在允许的断字点换行（浏览器保持默认处理）； break-word，在长单词或 URL 地址内部进行换行。
word-break	定义文本自动换行。Chrome和Safari浏览器支持不够友好。取值包括： normal：为默认值，允许在字内换行; keep-all,对于中文、韩文、日文，不允许字断开； break-all，与normal相同，允许非亚洲语言文本行的任意字内断开。
white-space	设置如何处理元素中的空格。所有浏览器都支持。取值包括： normal，默认处理方式； pre，显示预先格式化的文本，当文字超出边界时不换行； nowrap，强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象； pre-wrap，显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行； pre-line，保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

3 text-shadow

要实现的效果：

CSS3：

p {
    text-align: center;
    font: bold 60px helvetica, arial, sans-serif;
    color: #fff;
    text-shadow: black 0.1em 0.1em 0.2em;
}

要实现的效果：

CSS3：

p {
    text-align: center;
    font:bold 60px helvetica, arial, sans-serif;
    color: red;
    text-shadow: 0 0 4px white, 
        0 -5px 4px #ff3, 
        2px -10px 6px #fd3, 
        -2px -15px 11px #f80, 
        2px -25px 18px #f20;
}

要实现的效果：

CSS3：

p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: -1px -1px white,  
        1px 1px #333;
}

要实现的效果：

CSS3：

p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: 1px 1px white,  
        -1px -1px #333;
}

4 border的transparent属性

要实现的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

要实现的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

要实现的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

要实现的效果：

CSS3：

#demo {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;

}

5 transform: rotate

要实现的效果：

CSS3和HTML5：

<style type="text/css">
.bubble {
    width: 200px; /*定义框大小，可忽略，让消息框自由收缩*/
    height: 50px;
    background:hsla(93,96%,62%,1); /*定义背景色，必须与下面箭头背景色一致*/
    padding: 12px;  /*增加补白，防止消息文本跑到框外*/
    position: relative; /*定义定位包含框，方便定位箭头*/
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;   /*圆角*/
}
.bubble:before { 
    content: "";   /*不显示任何内容*/
    width: 0;  /*定义箭头内容区大小*/
    height: 0;
    position: absolute;  /*绝对定位*/
    z-index:-1;  /*显示在消息框下面*/
}
.bubble.bubble-left:before {
    right: 90%;
    top: 50%;
    
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    transform: rotate(-25deg);  /*定位箭头倾斜角度*/
    /*定义箭头长短、粗细*/
    border-top: 20px  solid transparent;
    border-right: 80px  solid hsla(93,96%,62%,1);
    border-bottom: 20px  solid transparent;

}

div {
    margin:50px;
}

<div class="bubble bubble-left">左侧消息提示框<br>class="bubble bubble-left"</div>

6 background: repeating-linear-gradient

要实现的效果：

CSS3：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
    background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px );
    background-size: 100% 30px;
    position: relative;
}
body:before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 4px;
    border-left: 4px double #FCA1A1;
    position: absolute;
    left: 30px;
}

需要实现的效果：

CSS3：

.box {
    background: linear-gradient(-135deg, #f00 30px, #fff 30px, #162e48 32px);
    color: #fff;
    padding: 12px 24px;
}

7 实现选项卡效果

<script>
function setTab(cursel,n){
	    for(i=1;i<=n;i++){
	        	var menu=document.getElementById("tab_"+i);
	        	var con=document.getElementById("con_"+i);
	        	menu.className=i==cursel?"hover":"";
	        	con.style.display=i==cursel?"block":"none";
	    }
}
</script>

<div id="tab">
    <div class="Menubox">
        <ul>
            <li id="tab_1" class="hover" onclick="setTab(1,4)">明星</li>
            <li id="tab_2" onclick="setTab(2,4)">搞笑</li>
            <li id="tab_3" onclick="setTab(3,4)">美女</li>
            <li id="tab_4" onclick="setTab(4,4)">摄影</li>
        </ul>
    </div>
    <div class="Contentbox">
        <div id="con_1" class="hover" ><img src="images/1.png" /></div>
        <div id="con_2" class="hide"><img src="images/2.png" /></div>
        <div id="con_3" class="hide"><img src="images/3.png" /></div>
        <div id="con_4" class="hide"><img src="images/4.png" /></div>
    </div>
</div>
</body>

8 表格隔行添加背景色

CSS3：

tbody tr:nth-child(2n) {
    background-color: #f5fafe;
}

9 border-radius

圆角表格的CSS3：

.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

10 border-spacing

单线表格的CSS3：

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;
}

11 box-shadow

设计图片翘边阴影效果：

CSS3：

.box {
    width: 980px;
    clear: both;
    overflow: hidden;
    height: auto;
    margin: 20px auto;
}
.box li {
    background: #fff;
    float: left;
    position: relative;
    margin: 20px 10px;
    border: 2px solid #efefef;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
}
.box li img {
    width: 290px;
    height: 200px;
    margin: 5px;
}
.box li:before {
    content: "";
    position: absolute;
    width: 90%;
    height: 80%;
    bottom: 13px;
    left: 21px;
    background: transparent;  /*透明背景*/
    z-index: -2;   /*显示在照片的下面*/
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);  /*添加阴影*/
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform: skew(-12deg) rotate(-6deg);   /*变形并旋转阴影，让其翘起*/
    -webkit-transform: skew(-12deg) rotate(-6deg);
    -moz-transform: skew(-12deg) rotate(-6deg);
    -os-transform: skew(-12deg) rotate(-6deg);
    -o-transform: skew(-12deg) rotate(-6deg);
}
.box li:after { /*在左侧添加翘边阴影*/
    content: "";
    position: absolute;
    width: 90%;
    height: 80%;
    bottom: 13px;
    right: 21px;
    z-index: -2;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform: skew(12deg) rotate(6deg);
    -webkit-transform: skew(12deg) rotate(6deg);
    -moz-transform: skew(12deg) rotate(6deg);
    -os-transform: skew(12deg) rotate(6deg);
    -o-transform: skew(12deg) rotate(6deg);
}

<ul class="box">
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpg" /></li>
</ul>

ref

《HTML5+CSS3+JavaScript从入门到精通（实例版）》

-End-

indow.onload=function(){

//得到现在当前的的时间

var then=new Date().getTime();

var canvas=document.getElementById("canvas");

//建立一个2d场景

var ctx=canvas.getContext("2d");

//定义一个数组来接收下面创建对象产生的值

var arr=[];

//返回透明度

ctx.globalAlpha=0.5;

//填充颜色

ctx.fillStyle="#8e6ca7";

setInterval(function(){

//得到每个40ms之后当前的时间

var nowTime=new Date().getTime();

var lag=(nowTime-then)/1000;

//赋值

then=nowTime;

//清除canvas

ctx.clearRect(0,0,canvas.width,canvas.height);

for(var i=0;i<arr.length;i++){

arr[i].num+=5;

//缩放比例让他越来越小

arr[i].scaleNum-=0.005;

arr[i].distanceNum-=(0.1*25)*lag;

ctx.beginPath();

ctx.save();

//坐标点把他位移到中间

ctx.translate(canvas.width/2,canvas.height/2);

//旋转

ctx.rotate(arr[i].num*Math.PI/180);

//进行比例缩放

ctx.scale(arr[i].scaleNum,arr[i].scaleNum);

//绘制矩形

ctx.fillRect(arr[i].distanceNum,0,80,60);

ctx.restore();

//判断是否小于0

if(arr[i].scaleNum<0){

arr.splice(i,1);

}

},40);

//每隔一段时间生成一次然后推入数组中

setInterval(function(){

//一个对象

var arrInit={

num:0,

scaleNum:1,

distanceNum:200

};

arr.push(arrInit);

},80);

}

</script>

在线咨询

上一篇：java后端实现word上传并转html格式
下一篇：推荐几个网站模板网址

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

16个超牛逼的HTML5和JavaScript特效

1 标注效果

2 与文本换行相关的属性

3 text-shadow

4 border的transparent属性

5 transform: rotate

6 background: repeating-linear-gradient

7 实现选项卡效果

8 表格隔行添加背景色

9 border-radius

10 border-spacing

11 box-shadow

您的项目需求