Vue 旋转动画效果

磨叽的鱼

已于 2024-08-20 15:57:44 修改

阅读量92

点赞数 1

分类专栏：前端开发 # Css样式 # vue动态效果文章标签： vue.js 前端 javascript

于 2024-08-20 15:56:46 首次发布

本文链接：https://blog.csdn.net/qq_54855933/article/details/141360860

版权

前端开发同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

Css样式

6 篇文章 0 订阅

订阅专栏

vue动态效果

6 篇文章 0 订阅

订阅专栏

前言

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

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