<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
position: relative;
/*overflow: hidden;*/
margin: 0 auto;
1000px;
height: 500px;
border: 1px solid black;
transform: scaleX(0) scaleY(0);
}
#box #inner{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
400px;
height: 400px;
opacity: 0;
transform: rotate(0deg) scale(0.5);
font-size: 100px;
line-height: 400px;
text-align: center;
color: white;
background: red;
border-radius:50% ;
}
.innerShow{
-webkit-animation: fadeIn 0.5s forwards;
}
@-webkit-keyframes scaleIn{
0%{
transform:scaleX(0) scaleY(0);
}
25%{
transform: scaleX(0) scaleY(0.5);
}
50%{
transform: scaleX(1) scaleY(0.5);
}
100%{
transform: scaleX(1) scaleY(1);
}
}
@-webkit-keyframes fadeIn{
from{opacity: 0;}
to{opacity: 1;}
}
@-webkit-keyframes rotateScale{
from{
transform:rotate(0deg) scale(0.5);
}
to{
transform:rotate(360deg) scale(1);
}
}
</style>
</head>
<body>
<input id="btn" type="button" name="" id="" value="按钮" />
<div id="box">
<div id="inner">HTML5</div>
</div>
<script>
var oBtn = document.getElementById("btn");
var oBox = document.getElementById("box");
var oInner = document.getElementById('inner');
oBtn.onclick = function(){
oBox.style.webkitAnimation = "scaleIn 1s ease forwards";
}
oBox.addEventListener("webkitAnimationEnd",function(){
oInner.className = "innerShow";
},false);
oInner.addEventListener("webkitAnimationEnd",function(){
oInner.style.opacity =1;
oInner.style.webkitAnimation = "rotateScale 1s forwards";
},false);
</script>
</body>
</html>