目录
- 前言
- 效果演示
- 具体代码实现
前言
这里记录一个旋转动画,在鼠标经过的时候停止,鼠标离开继续旋转。
实现思路: 利用@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>