Vue 旋转动画效果

前言

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

    实现思路： 利用@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>