css中圖片有縮放和轉動效果

現在html中利用div來包裹住一張圖片。

    <div class="xuanzhuan">
        <img src="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);
            }
        }