图片放大抖动
Posted bagnliu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片放大抖动相关的知识，希望对你有一定的参考价值。
图片放大抖动：（不同的角度显示不同的大小，形成抖动的效果）
<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>
以上是关于图片放大抖动的主要内容，如果未能解决你的问题，请参考以下文章