空格键展示animate.css 动画效果

来源：互联网发布：seo从入门到精通编辑：程序博客网时间：2024/06/09 23:07
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" type="text/css" href="http://oobn3d8km.bkt.clouddn.com/animate.css"/>        <style type="text/css">            #big{                padding-top: 200px;                width: 1000px;                /*border: 1px solid red;*/                margin: 0 auto;            }            #big>div{                width: 100px;                height:100px;                /*border: 1px solid black;*/                float: left;                margin-right: 5px;            }            #myInput{                z-index: 1000;                position: absolute;                top: 60%;                left: 40%;                display: inline-block;                width: 200px;                height: 100px;                background: green;                font-size: 50px;                font-weight: bolder;                border-radius: 100px;                outline: none;                box-shadow: 5px 5px 20px;            }            #myInput:hover{                background: burlywood;                color: white;                           }            #myInput:active{                color: black;            }        </style>    </head>    <body>        <div id="big">            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <p style="clear: both;"></p>        </div>        <input type="button" name="" id="myInput" value="刷新" onclick="newpage()" />        <script type="text/javascript">            var divArr = document.querySelectorAll("#big>div");            var imgAnimateArr = [            "bounce" ,"flash" ,"pulse" ,"rubberBand" ,"shake" ,"swing" , "tada" ,"wobble" ,"jello" ,"bounceIn" ,            "bounceInDown" ,"bounceInLeft" ,"bounceInRight" ,"bounceInUp" ,"bounceOut" , "bounceOutDown" ,            "bounceOutLeft" ,"bounceOutRight" ,"bounceOutUp" , "fadeIn" ,"fadeInDown" ,"fadeInDownBig" ,"fadeInLeft" ,            "fadeInLeftBig" , "fadeInRight" ,"fadeInRightBig" ,"fadeInUp" ,"fadeInUpBig" ,"fadeOut", "fadeOutDown" ,            "fadeOutDownBig" ,"fadeOutLeft" ,"fadeOutLeftBig" ,"fadeOutRight" ,"fadeOutRightBig" ,"fadeOutUp" ,            "fadeOutUpBig" , "flipInX" ,"flipInY" ,"flipOutX" ,"flipOutY" ,"lightSpeedIn" , "lightSpeedOut" ,            "rotateIn" ,"rotateInDownLeft" ,"rotateInDownRight" , "rotateInUpLeft" ,"rotateInUpRight" ,"rotateOut" ,            "rotateOutDownLeft" , "rotateOutDownRight" ,"rotateOutUpLeft" ,"rotateOutUpRight" ,"hinge" , "zoomInUp" ,            "zoomOut" ,"zoomOutDown" ,"zoomOutLeft" ,"zoomOutRight" , "zoomOutUp" ,"slideInDown" ,"slideInLeft" ,             "slideInRight" ,"slideInUp" ,"slideOutDown" ,"slideOutLeft" ,"slideOutRight" ,"slideOutUp"];            for(var i = 0; i < divArr.length; i++){                divArr[i].style.background = randColor();                var randAnimateNum = Math.floor(Math.random() * (imgAnimateArr.length - 0 + 1) + 0);                divArr[i].className = "animated " + imgAnimateArr[randAnimateNum];            }            function newpage(){                 window.location.reload();            }            function randColor(){            var r = Math.floor(Math.random() * (250 - 0 + 1) + 0);            var g = Math.floor(Math.random() * (250 - 0 + 1) + 0);            var b = Math.floor(Math.random() * (250 - 0 + 1) + 0);            return "rgb(" + r +"," + g +"," + b +")";                           }            var myInput = document.getElementById("myInput");             document.onkeydown = function(ev){//ev 形参（名字随意），它代表的是本次事件的对象，它里面包含一些这次事件的一些信息                if(ev.keyCode == "32"){                    newpage();                    myInput.style.background = "burlywood";                    myInput.style.color = "white"                }             }        </script>    </body></html>
1 0