前言

    这里记录一个旋转动画，在鼠标经过的时候停止，鼠标离开继续旋转。

    实现思路： 利用@keyframes关键字定义一个旋转动画

效果演示

具体代码实现

<template>
    <div class="container">
        <div class="box"  @mouseenter=" stopRotate = true " @mouseleave=" stopRotate = false " >
            
            <!-- 旋转图片-->
            <img alt="Vue logo" class="rotate-icon"  :class="{'paused': stopRotate === true}" src="./assets/logo.svg" />
        </div>
    </div>
</template>

<script>
export default {
    name: 'App',
    data(){
        return{
            stopRotate:false //控制是否旋转
        }
    }
}
</script>

<style lang="scss" scoped>
.container{
    width:100vw;
    height:100vh;
    position:relative;
    background-color:#000000;

    .box{
        width: 48px;
        height: 48px;
        background: #ffffff;
        border-radius: 50%;
        position:absolute;
        left:50%;
        top:30%;
        transform:translateX(-50%);
        display: flex;
        justify-content:center;
        align-items: center;

        &:hover{
            cursor: pointer;
        }

        .rotate-icon{
            width: 24px;
            height: 24px;
            //旋转动画
            animation: rotate 3s linear infinite;
        }

        @keyframes rotate {  
            from {  
                transform: rotate(0deg);  
            }  
            to {  
                transform: rotate(360deg);  
            }  
        }
        
        // 控制动画暂停
        .paused {  
            animation-play-state: paused;  
        } 

    }
}
</style>