原 css3+js随机文字动画
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
.wrap {
height:100%;
width:100%;
position:absolute;
overflow: hidden;
margin-left: -10px;
background-image: url("DAimG_2011102300001898SF.jpg");
background-size: 100% 100%;
z-index: 0;
}
@-webkit-keyframes myfirst
{
100%{-webkit-transform:translateX(2000px);}
}
body
{
}
#msg{
position:absolute;
width:100px;
height:100px;
font-size: 100px;
box-shadow: 0 0 18px rgba(11,1,32,3);
border-color:rgba(141,39,142,.75);
z-index: 11;
display:none;
background-color: gray;
}
#login{
width:200px;
height:500px;
}
</style>
</head>
<body>
<div id="msg"></div>
<div class="wrap"></div>
</body>
</html>
<script>
var datas=new Array();
var focusMsg={isFocus:false,word:"",obj:""};
window.onload = function ()
{
var family=new Array();
for (var i =0;i<80; i++) {
document.getElementsByClassName("wrap")[0].innerHTML+="<div></div>";
};
var divs = document.getElementsByClassName("wrap")[0].children;
for(var i=0;i<divs.length;i++)
{
var div=divs[i];
var size = 60;
size = size * Math.sin(Math.random() * Math.PI);
eval("var word=" + '"\\u' + (Math.round(Math.random() * 20901) + 19968).toString(16) + '"')
div.style.fontSize =size+"px";
div.style.fontFamily = "KaiTi";
div.style.top = window.screen.height * Math.random()+"px";
div.style.left = 2 * size+"px";
div.style.position="absolute";
div.style.fontStyle="bold";
div.style.zIndex="0";
div.style.animation="myfirst 6s linear infinite";
div.style.animationDelay = 7 * Math.random()+"s";
div.innerText=word;
datas[i]=datakeep.CreateNew();
div.setAttribute("onmouseenter", "enter(this,"+i+")");
div.setAttribute("onmouseleave", "leave(this,"+i+")");
}
}
var datakeep={CreateNew:function(){
var data={};
data.divWidth=0;
data.divHeight=0;
data.divMarginTop=0;
data.divMarginLeft=0;
data.divFontSize=0;
data.animation="";
data.divLeft="";
data.divTop="";
data.enterTime=0;
return data;
}}
var enter=function(div,i){
var msg=document.getElementById("msg");
msg.style.display="block";
msg.style.width="100px";
msg.style.left= window.screen.width *0.4+"px";
msg.style.top=window.screen.height *0.4+"px";
msg.innerText=div.innerText;
/* if(focusMsg.isFocus==true&&div.innerText!=focusMsg.word)
{
return;
};
if(datas[i].enterTime==0)
{
datas[i].divFontSize=div.style.fontSize;
datas[i].divWidth=div.style.width;
datas[i].divHeight=div.style.height;
datas[i].animation=div.style.animation;
datas[i].divLeft=div.style.left;
datas[i].divTop=div.style.top;
div.style.fontSize="100px";
div.style.width="120px";
div.style.height="120px";
div.style.top = window.screen.height *0.4+"px";
div.style.left = window.screen.width *0.4+"px";
div.style.animation="none";
div.style.borderColor="rgba(141,39,142,.75)";
div.style.boxShadow="0 0 18px rgba(11,1,32,3)";
div.style.textAlign="center";
focusMsg.isFocus=true;
focusMsg.word=div.innerText;
focusMsg.obj=div;
}
else
{
}
datas[i].enterTime++;*/
};
var leave=function(div,i){
var msg=document.getElementById("msg");
msg.style.display="none";
/* if(datas[i].enterTime<2) return;
datas[i].enterTime=0;
focusMsg.word="";
focusMsg.isFocus=false;
focusMsg.obj="";
div.style.fontSize=datas[i].divFontSize;
div.style.width=datas[i].divWidth;
div.style.height=datas[i].divHeight;
div.style.left=datas[i].divLeft;
div.style.top=datas[i].divTop;
div.style.animation=datas[i].animation;
div.style.borderColor="transparent";
div.style.boxShadow="none";
div.style.textAlign="center";*/
};
</script>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读