<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>
标签：box,obj,bbb,弹框,变速,5px,shadow,speed2,dota2 From： https://www.cnblogs.com/justSmile2/p/17909826.html