css中图片有缩放和转动效果

现在html中利用div来包裹住一张图片。

    <div class="xuanzhuan">
        <img src="data:images/top.png" alt="">
    </div>

然后在css中利用固定定位来将图片固定好，再利用动画的效果即可出来。

       .xuanzhuan {
            position: fixed;
            top: 20%;
            right: 10%;
            animation: haha 1s ease-in-out 0s infinite;
        }

        @keyframes haha {
            0% {
                transform: scale(1);
                /*开始为原始大小*/
            }

            25% {
                transform: scale(1.1);
                /*放大1.1倍*/
            }

            50%,
            70%,
            90% {
                transform: scale(1.1) rotate(3deg);
            }

            60%,
            80% {
                transform: scale(1.1) rotate(-3deg);
            }
        }