原 css3+js随机文字动画

魂祭心

发布于 2018-05-17 09:37:51

5.4K00

代码可运行

文章被收录于专栏：魂祭心魂祭心

运行总次数：0

代码可运行

<!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>