圖片放大抖動
阿新 • • 發佈：2017-11-27
infinite png set posit image tro pos cal 大小
圖片放大抖動：（不同的角度顯示不同的大小，形成抖動的效果）
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.hongbao {
width: 3.25rem;
height: 3.2rem;
position: absolute;
top: 54%;
left: 30%;
animation: tada 1s both infinite;
-webkit-animation: tada 1s both infinite;
-moz-animation: tada 1s both infinite;
-ms-animation: tada 1s both infinite;
-o-animation: tada 1s both infinite;
}
img{
width: 100%;
}
@keyframes tada {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
10%, 20% {
-webkit-transform: scale(0.9) rotate(-3deg);
-ms-transform: scale(0.9) rotate(-3deg);
-o-transform: scale(0.9) rotate(-3deg);
-moz-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale(1.1) rotate(3deg);
-ms-transform: scale(1.1) rotate(3deg);
-moz-transform: scale(1.1) rotate(3deg);
-o-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-webkit-transform: scale(1.1) rotate(-3deg);
-ms-transform: scale(1.1) rotate(-3deg);
-moz-transform: scale(1.1) rotate(-3deg);
-o-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg);
}
100% {
-webkit-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
}
</style>
</head>
<body>
<div class="hongbao">
<img src="images/top04.png" />
</div>
</body>
</html>
圖片放大抖動