<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--如果是IE 就以标准渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=0.5, maximum-scale=5.0' />
<!--当前页面的三要素-->
<title>demo</title>
<meta name="description" content="demo" />
<meta http-equiv="keywords" content="demo" />
<!-- css -->
<style>
.animated {
300px;
height:300px;
background:url(./aaa.png) no-repeat center/cover;
padding-top: 95px;
margin: 60px auto;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes tada {
0% {
-webkit-transform: scale(1);
}
10%,
20% {
-webkit-transform: scale(0.9) rotate(-3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale(1.1) rotate(3deg);
}
40%,
60%,
80% {
-webkit-transform: scale(1.1) rotate(-3deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
}
}
@keyframes tada {
0% {
transform: scale(1);
}
10%,
20% {
transform: scale(0.9) rotate(-3deg);
}
30%,
50%,
70%,
90% {
transform: scale(1.1) rotate(3deg);
}
40%,
60%,
80% {
transform: scale(1.1) rotate(-3deg);
}
100% {
transform: scale(1) rotate(0);
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
}
</style>
</head>
<body>
<div id="animated-example" class="animated tada"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
效果图：
