这个是雪花飘落的。从上往下票，蒲公英是左右飘，你稍微变通一下即可。
主流浏览器对html5的支持情况：
（1）Chrome，Firefox：支持html5很多年，而且有自动升级，支持最好。
（2）Safari，Opera：同样支持html5很多年，支持也很好。
（3）IE：IE10起比较好了，之前很差。
资料来源航歌网，其他浏览器则根据内核为准。网上有专门的H5兼容性测试网站，由于回答策略的限制无法发送链接，自己找找就有了
FormFollowsFunction就是一个展示HTML5实现的网站，目前网站展示了14个作品，其中包括了交互 *** 作以及视觉效果。这些效果本身并不是一个完整的产品，但是加入到产品中就能让产品生色不少。以下是百分网小编搜索整理的关于14个基于HTML5实现的特效，供参考借鉴，希望对大家有所帮助!
1、散景(Bokeh)
一种图像的焦外效果，通过HTML5实现的这种效果可以加载在背景、字体浮现。
2、3D效果
3D西红柿罐头汤，可通过鼠标进行旋转 *** 作，同时底部有一个倒影效果，一个很优秀的交互效果示范。
3、宇宙全景图
设定整个宇宙的场景，可以用360度观察整个宇宙星云，这种实现方式呈现出的效果更接近Google的街景地图。
4、像素化效果
这种效果用于图片很有趣，而实际可利用到的领域，还有待探索。
5、螺旋效果
字体的旋转效果，简单的近乎一张GIF图片，不过通过对文章的替换，可以轻易的转换成各种各样的文案展示。
6、结晶化滤镜
通过鼠标可选择结晶化的范围，用于网页可对界面直接做出更多的交互视觉效果。
7、色相混合
随着鼠标移动而改变各个位置的色相，一种很简单就能汇聚用户视线的交互效果，不过在简单的背景才更能体现这种效果的价值。
8、翻转时钟
一种时钟的展示效果，结构非常简单，而看上去也很清晰明了，适合嵌入到很多不同的页面中作为实时时间的展示。
9、水纹倒影
一种视觉效果，在这个Demo中可以调节倒影波动的速度。这种效果适合制作Logo以及主页的展示。
10、自由落体
“下雨的人”展示了一种自由落体的效果，可以用鼠标条件调节飘落的角度，提供了一种带有物理效果的交互 *** 作。这种功能特别用于游戏。
11、水面波纹
同样是一种物理效果，可通过鼠标刺激水面波纹，在网页上就能轻松实现。
12、树的成长
一种应激 *** 作的交互方式，点击一次长出一棵树，可用于网页展示的附加效果。这种效果在视觉上有多种用法，网页、游戏都可以。
13、字母雨刷
在屏幕上扫除字母的雨刷效果，初次看见感觉像是网页刷新的过度画面。
14、渐显效果
通过一些杂乱无章的线逐渐显现出一幅画，中间的显现过程很适合作为网页加载的等待界面。
背景颜色自己选[推荐][共1步]====1、以下是这个效果的全部代码。[最好从一个空页面开始]
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb_2312-80">
<title>新页面 </title>
</head>
<body>
<script language="JavaScript">
<!--
done = 0
step = 4
function anim(yp,yk)
{
if(document.layers) document.layers["napis"].top=yp
else document.all["napis"].style.top=yp
if(yp>yk) step = -4
if(yp<60) step = 4
setTimeout('anim('+(yp+step)+','+yk+')', 35)
}
function start()
{
if(done) return
done = 1
if(navigator.appName=="Netscape") {
document.napis.left=innerWidth/2 - 145
anim(60,innerHeight - 60)
}
else {
napis.style.left=11
anim(60,document.body.offsetHeight - 60)
}
}
//-->
</script>
<div id="napis"
style="position: absolutetop: -50
color: #000000font-family:宋体font-size:9pt">
</div><script language="JavaScript">
<!--
setTimeout('start()',10)
//-->
</script>
<script language="JavaScript">
<!-- Begin
function initArray() {
for (var i = 0i <initArray.arguments.lengthi++) {
this[i] = initArray.arguments[i]
}
this.length = initArray.arguments.length
}
var colors = new initArray(
"#000000","#0000FF","#80FFFF","#80FF80","#FFFF00","#FF8000","#FF00FF","#FF0000"
)
delay = 100
link = 0
vlink = 0
function linkDance() {
link = (link+1)%colors.length
vlink = (vlink+1)%colors.length
document.linkColor = colors[link]
document.vlinkColor = colors[vlink]
setTimeout("linkDance()",delay)
}
linkDance()
// End -->
</script>
<script>
function colors(c1){
this.c1 = c1
}
a00 = new colors("FFFBD0")
a01 = new colors("FF0000")
a02 = new colors("FF8080")
a03 = new colors("FF8000")
a04 = new colors("FFFF00")
a05 = new colors("000080")
a06 = new colors("0000FF")
a07 = new colors("008000")
a08 = new colors("00FF00")
a09 = new colors("804000")
a10 = new colors("808000")
a11 = new colors("000000")
a12 = new colors("FFFFFF")
a13 = new colors("C0C0C0")
a14 = new colors("408080")
a15 = new colors("808080")
a16 = new colors("D2BF51")
a17 = new colors("44BBE8")
a18 = new colors("C97AB9")
a19 = new colors("A2C97A")
a20 = new colors("804000")
a21 = new colors("6AE6C4")
a22 = new colors("33A3D1")
a23 = new colors("6C9AEE")
function changebg(type){
scheme = type
document.bgColor = scheme.c1
timerID=setTimeout('document.bgColor = scheme.c2', document.selector.value * 10)
}
</script>
<form NAME="selector">
<p><input TYPE="button" onClick="changebg(a00)" style="background-color: rgb(255,251,208)"><input
TYPE="button" onClick="changebg(a01)" style="background-color: rgb(255,0,0)"><input
TYPE="button" onClick="changebg(a02)" style="background-color: rgb(255,128,128)"><input
TYPE="button" onClick="changebg(a03)" style="background-color: rgb(255,128,0)"><input
TYPE="button" onClick="changebg(a04)" style="background-color: rgb(255,255,0)"><input
TYPE="button" onClick="changebg(a05)" style="background-color: rgb(0,0,128)"><input
TYPE="button" onClick="changebg(a06)" style="background-color: rgb(0,0,255)"><input
TYPE="button" onClick="changebg(a07)" style="background-color: rgb(0,128,0)"><input
TYPE="button" onClick="changebg(a08)" style="background-color: rgb(0,255,0)"><input
TYPE="button" onClick="changebg(a09)" style="background-color: rgb(128,0,0)"><input
TYPE="button" onClick="changebg(a10)" style="background-color: rgb(128,128,0)"><input
TYPE="button" onClick="changebg(a11)" style="background-color: rgb(0,0,0)"><input
TYPE="button" onClick="changebg(a12)" style="background-color: rgb(255,255,255)"><input
TYPE="button" onClick="changebg(a13)" style="background-color: rgb(192,192,192)"><input
TYPE="button" onClick="changebg(a14)" style="background-color: rgb(64,128,128)"><input
TYPE="button" onClick="changebg(a15)" style="background-color: rgb(128,128,128)"><input
TYPE="button" onClick="changebg(a16)" style="background-color: rgb(210,191,81)"><input
TYPE="button" onClick="changebg(a17)" style="background-color: rgb(68,187,232)"><input
TYPE="button" onClick="changebg(a18)" style="background-color: rgb(201,122,185)"><input
TYPE="button" onClick="changebg(a19)" style="background-color: rgb(162,201,122)"><input
TYPE="button" onClick="changebg(a20)" style="background-color: rgb(106,230,196)"><input
TYPE="button" onClick="changebg(a21)" style="background-color: rgb(194,219,185)"><input
TYPE="button" onClick="changebg(a22)" style="background-color: rgb(51,163,209)"><input
TYPE="button" onClick="changebg(a23)" style="background-color: rgb(108,154,238)"></p>
</form>
</body>
</html>
不停变换的背景颜色[共1步]
====1、将以下代码加入HTML的<body></body>之间：
<body bgColor="#ffffff" onload="chgCol()pingpong()">
<script language="JavaScript">
<!-- Hide from JavaScript-Impaired Browsers
var pos = 10
function initArray() {
this.length = initArray.arguments.length
for (var i = 0i <this.lengthi++) {
this[i] = initArray.arguments[i]
}
}
var col=new initArray("4b","5b","8b","8b")
col[0] = "yellow"
col[1] = "coral"
col[2] = "orange"
col[3] = "red"
col[4] = "greenyellow"
col[5] = "lime"
col[6] = "turquoise"
col[7] = "coral"
col[8] = "blueviolet"
col[9] = "violet"
function chgCol() {
pos++
if (pos<0||pos>9) {
pos = 0
}
document.bgColor = col[pos]
setTimeout("chgCol()",5000)
/* Change above set to every 10 seconds (1000 = 1 sec) If
you wish to speed it up, lower the number. To slow it
down, raise the number. */
}
var yourwords = "不断变化背景色彩"var buffer1=" "var buffer2=" "var message1=buffer1+yourwords+buffer2var dir = "left"var speed =150function pingpong(){if (dir == "left") { message2=message1.substring(2,message1.length)+" "window.status=message2setTimeout("pingpong()",speed)message1=message2if (message1.substring(0,1) == "*") dir="right"}else { message2=" "+message1.substring(0,message1.length-2)window.status=message2setTimeout("pingpong()",speed)message1=message2if (message1.substring(message1.length-1,message1.length) == "*") dir="left"}}// --></script>
检测浏览器类型并调用不同的背景音乐[修改MIDI文件名][共1步]
====1、将以下代码加入HTML的<body></body>之间：
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var MSIE=navigator.userAgent.indexOf("MSIE")
var NETS=navigator.userAgent.indexOf("Netscape")
var OPER=navigator.userAgent.indexOf("Opera")
if((MSIE>-1) || (OPER>-1)) {
document.write("<BGSOUND SRC=sound.mid LOOP=INFINITE>")
} else {
document.write("<EMBED SRC=sound2.mid AUTOSTART=TRUE ")
document.write("HIDDEN=true VOLUME=100 LOOP=TRUE>")
}
// End -->
</SCRIPT>
滚动背景[特别推荐][共1步][IE专用]<先在页面中设置好背景图片然后再进行下一步>
====1、将以下代码加入HEML的<body></body>之间：
<script language="VBScript">
dim c,numgc
c=-100000
numgc=document.body.sourceIndex
sub SF
c=c+1
Document.all(numgc).style.BackgroundPosition= "0 " &c
id=SetTimeOut("SF",16,"VBScript")
end sub
SF
</script>
永远居中的背景图片[推荐][共1步][修改图片名称]
====1、将以下代码加入HEML的<body></body>之间：
<STYLE TYPE="text/css">
<!--
BODY {background-image: URL(图片名称.gif)
background-position: center
background-repeat: no-repeat
background-attachment: fixed}
-->
</STYLE>
随机显示的背景图片[想别人每次看你页面时背景都不一样吗？][共1步]
====1、将以下代码加入HTML的<head></head>之间：
<script LANGUAGE="JavaScript">
bg = new Array(2)//设定图片数量，如果图片数为3，这个参数就设为2，依次类推
bg[0] = 'bg1.gif' //显示的图片路径，可用http://
bg[1] = 'bg2.gif'
bg[2] = 'bg3.gif'
index = Math.floor(Math.random() * bg.length)
document.write("<BODY BACKGROUND="+bg[index]+">")
</script>
跟随屏幕移动的图像[推荐]修改图片名称和文字即可][共2步]
====1、将以下代码加入到HEML的<head></head>之间：
<style type="text/css">
#floater {
position: absolute
left: 500
top: 146
width: 125
visibility: visible
z-index: 10
}</style>
====2、将以下代码加入到HEML的<body></body>之间
<div ID="floater" style="left: 590pxtop: 158px">
<p align="center"><img SRC="想要显示的图片.gif" alt="图片显示的文字" WIDTH="125" HEIGHT="60"><br>
<font color="#FF8040">图片下面的文字</font></p>
</div><script LANGUAGE="JavaScript">
self.onError=null
currentX = currentY = 0
whichIt = null
lastScrollX = 0lastScrollY = 0
NS = (document.layers) ? 1 : 0
IE = (document.all) ? 1: 0
<!-- STALKER CODE -->
function heartBeat() {
if(IE) { diffY = document.body.scrollTopdiffX = document.body.scrollLeft}
if(NS) { diffY = self.pageYOffsetdiffX = self.pageXOffset}
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY)
if(percent >0) percent = Math.ceil(percent)
else percent = Math.floor(percent)
if(IE) document.all.floater.style.pixelTop += percent
if(NS) document.floater.top += percent
lastScrollY = lastScrollY + percent
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX)
if(percent >0) percent = Math.ceil(percent)
else percent = Math.floor(percent)
if(IE) document.all.floater.style.pixelLeft += percent
if(NS) document.floater.left += percent
lastScrollX = lastScrollX + percent
}
}
<!-- /STALKER CODE -->
<!-- DRAG DROP CODE -->
function checkFocus(x,y) {
stalkerx = document.floater.pageX
stalkery = document.floater.pageY
stalkerwidth = document.floater.clip.width
stalkerheight = document.floater.clip.height
if( (x >stalkerx &&x <(stalkerx+stalkerwidth)) &&(y >stalkery &&y <(stalkery+stalkerheight))) return true
else return false
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement
while (whichIt.id.indexOf("floater") == -1) {
whichIt = whichIt.parentElement
if (whichIt == null) { return true}
}
whichIt.style.pixelLeft = whichIt.offsetLeft
whichIt.style.pixelTop = whichIt.offsetTop
currentX = (event.clientX + document.body.scrollLeft)
currentY = (event.clientY + document.body.scrollTop)
} else {
window.captureEvents(Event.MOUSEMOVE)
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.floater
StalkerTouchedX = e.pageX-document.floater.pageX
StalkerTouchedY = e.pageY-document.floater.pageY
}
}
return true
}
function moveIt(e) {
if (whichIt == null) { return false}
if(IE) {
newX = (event.clientX + document.body.scrollLeft)
newY = (event.clientY + document.body.scrollTop)
distanceX = (newX - currentX)distanceY = (newY - currentY)
currentX = newXcurrentY = newY
whichIt.style.pixelLeft += distanceX
whichIt.style.pixelTop += distanceY
if(whichIt.style.pixelTop <document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop
if(whichIt.style.pixelLeft <document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft
if(whichIt.style.pixelLeft >document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20
if(whichIt.style.pixelTop >document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5
event.returnValue = false
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY)
if(whichIt.left <0+self.pageXOffset) whichIt.left = 0+self.pageXOffset
if(whichIt.top <0+self.pageYOffset) whichIt.top = 0+self.pageYOffset
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17
return false
}
return false
}
function dropIt() {
whichIt = null
if(NS) window.releaseEvents (Event.MOUSEMOVE)
return true
}
<!-- DRAG DROP CODE -->
if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN)
window.onmousedown = grabIt
window.onmousemove = moveIt
window.onmouseup = dropIt
}
if(IE) {
document.onmousedown = grabIt
document.onmousemove = moveIt
document.onmouseup = dropIt
}
if(NS || IE) action = window.setInterval("heartBeat()",1)
</script>
可以看一下http://www.ik8.com/
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）