dota2变速弹框

<style type="text/css">
    @keyframes  shineRed {  
        from {box-shadow: 0 0 5px #bbb; }  
        50% {box-shadow: 0 0 10px red; }  
        to {box-shadow: 0 0 5px #bbb; }  
    }
    @-webkit-keyframes  shineRed {  
        from { -webkit-box-shadow: 0 0 5px #bbb; }  
        50% { -webkit-box-shadow: 0 0 10px red; }  
        to { -webkit-box-shadow: 0 0 5px #bbb; }  
    }
    @-moz-keyframes  shineRed {  
        from { -moz-box-shadow: 0 0 5px #bbb; }  
        50% { -moz-box-shadow: 0 0 10px red; }  
        to { -moz-box-shadow: 0 0 5px #bbb; }  
    }
    @-o-keyframes  shineRed {  
        from { -o-box-shadow: 0 0 5px #bbb; }  
        50% { -o-box-shadow: 0 0 10px red; }  
        to { -o-box-shadow: 0 0 5px #bbb; }  
    }
    h1{
        width: 200px;
        height: 200px;
        margin: 200px auto;  
        text-align: center;
        line-height: 200px;
        border: 1px solid red;
        color: #fff;
        background-color: rgba(22,45,1,.5);
        animation: shineRed 3s infinite;
        -webkit-animation: shineRed 3s infinite;
        -moz-animation: shineRed 3s infinite;
        -o-animation: shineRed 3s infinite;
    }  
</style>
<h1>hello</h1>
<script type="text/javascript">
        // 7.同时改变宽高 
            function startWH(obj,target1,target2){    
                clearInterval(obj.timer);
                obj.timer=setInterval(function(){
                  if (obj.offsetWidth==target1&&obj.offsetHeight==target2) {
                    clearInterval(obj.timer);
                  }else{
                    var speed1,speed2,speed3;
                    speed1=(target1-obj.offsetWidth)/10;
                    speed1=speed1>0 ? Math.ceil(speed1) : Math.floor(speed1);
                    speed2=(target2-obj.offsetHeight)/10;
                    speed2=speed2>0 ? Math.ceil(speed2) : Math.floor(speed2);
                    obj.style.width=obj.offsetWidth+speed1+"px";
                    obj.style.height=obj.offsetHeight+speed2+"px";
                    obj.style.lineHeight=obj.offsetHeight+speed2+"px";
                  }     
                },16);
            }
    var h1=document.getElementsByTagName('h1')[0];
    startWH(h1,400,100);

</script>

 

posted @ 2023-12-17 21:08  justSmile2  阅读(3)  评论(0编辑  收藏  举报