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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/405924.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FLUX.1 当前支持FLUX.1的Lora模型

首先&#xff0c;我们来梳理一下本次Xlabs-AI团队放出的七款Lora模型&#xff0c;分别是 写实、Furry&#xff08;但是目前该模型还不支持ComfyUI&#xff09;、MJV6、动漫、迪斯尼、风景和艺术风格。每种模型都经过精心训练&#xff0c;能够为 Flux 模型带来卓越的风格转换能…

设计模式笔记02(java版)

文章目录 创建者模式单例设计模式 ★单例模式的结构单例模式的实现饿汉式-方式1&#xff08;静态变量方式&#xff09;饿汉式-方式2&#xff08;静态代码块方式&#xff09;懒汉式-方式1&#xff08;线程不安全&#xff09;懒汉式-方式2&#xff08;线程安全&#xff09;懒汉式…

教程:postman的平替hoppscotch,又叫postwoman,hoppscotch的docker-compose安装过程

目录 1. 背景2. 前期准备2.1 准备docker-compose文件&#xff0c;两个版本&#xff0c;一个3合1&#xff0c;一个分开2.1.1 3合1版本&#xff08;推荐&#xff09;2.1.2 独立版本 2.2 准备安装nginx-proxy-manager&#xff08;可选&#xff09;2.2 准备.env文件2.2.1 默认ip的.…

[数据集][目标检测]木材缺陷检测数据集VOC+YOLO格式2383张10类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2383 标注数量(xml文件个数)&#xff1a;2383 标注数量(txt文件个数)&#xff1a;2383 标注…

c++习题25-判断字符串是否回文

目录 一&#xff0c;题目 二&#xff0c;思路 三&#xff0c;代码 一&#xff0c;题目 描述 输入一个字符串&#xff0c;输出该字符串是否回文。回文是指顺读和倒读都一样的字符串。 输入描述 输入为一行字符串&#xff08;字符串中没有空白字符&#xff0c;字符串长度不…

第十二届青少年蓝桥杯Python组省赛试题

一、选择题 1.设s’Hello Lan Qiao’,执行print(s[4:11])输出的结果为()。 *选择题严禁使用程序验证 A、lo Lan Qi B、lo Lan Q C、o Lan Qi D、o Lan Q 提示&#xff1a;切片 2.循环语句for i in range(8,-4,-2):执行了几次循环()。 *选择题严禁使用程序验证 A、4 B、5 C、6…

Manim动画:相机的移动(MovingCameraScene)

1.相机的移动(MovingCameraScene) MovingCameraScene 是 Manim 中的一个类&#xff0c;用于创建可以移动的相机场景。这个类继承自 Scene&#xff0c;并提供了关于相机移动的额外功能。 MovingCameraScene(camera_class<class manim.camera.moving_camera.MovingCamera>…

Cobalt Strike 4.8 用户指南-第二节-用户界面

2.1、概述 Cobalt Strike用户界面分为两部分。界面顶部显示会话或目标的可视化。界面底部显示与你交互的每个 Cobalt Strike 功能或会话的选项卡。可以单击这两个部分之间的区域并根据自己的喜好调整它们的大小。 # 2.2、工具栏 顶部的工具栏提供对常见 Cobalt Strike功能的快…

Day23 第十站 文件IO的多路复用

#include <myhead.h>void insert_client(int *client_arr,int *len,int client) {//client_arr[n]{3,4} len&client_count,client_count2;//添加 5 client_arr[2(*len)]5(client)client_arr[*len]client;(*len); } int find_client(int *client_arr,int len,int clie…

【Python开发实践】在线商城系统——需求及需求分析

项目背景及需求 这个练习项目的设置背景是一家图书销售公司&#xff0c;为了扩大销售渠道&#xff0c;想要开通网上商城&#xff0c;利用在线博客和电子商城来销售图书。 具体需求如下&#xff1a; 每个商品可以留言 实现在线购物车处理和订单处理 实现对产品、购物车和订单的…

python依赖包安装失败的解决办法(适用于conda安装)

版权声明&#xff1a;本文为博主原创文章&#xff0c;如需转载请贴上原博文链接&#xff1a;python依赖包安装失败的解决办法&#xff08;适用于conda安装&#xff09;-CSDN博客 前言&#xff1a;这个问题之前一直困扰着我&#xff0c;因为最近要升级Anaconda-Navigator&#x…

haproxy实验

基本介绍 http://t.csdnimg.cn/Z64QVhttp://t.csdnimg.cn/Z64QV 实验环境 功能IP客户端172.25.254.233haproxy eth0:172.25.254.100 eth1:192.168.0.10 rs1eth0:192.168.0.101rs2eth0:192.168.0.102 安装haproxy yum install haproxy -y 多进程和多线程 vim /etc/hap…

基于Conda的Python版本管理与Python包管理

文章目录 前言Conda是什么Conda与Anaconda安装Anaconda安装包windows v2024.06-1安装包更多版本安装包(Windows/Mac/Linux) 安装添加环境变量安装过程中遇到的问题 使用步骤创建Python环境激活Python环境安装Python包列出和切换 Python 版本管理多个环境 总结 前言 开发环境中…

力扣 1425带限制的子序列和

这是一道 动态规划加单调队列的题&#xff0c;重点加强单调队列知识的学习 回归本题&#xff0c;这个题中&#xff0c;动态规划的部分略去&#xff0c;状态转移方程可求 单调队列部分 1维护队头 if(i-sta.front() k) sta.pop_front(); 2维护队尾 while(!sta.empty() &…

[C#]基于winform结合photocartoon算法实现人物卡通化源码实现

【官方框架】 https://github.com/minivision-ai/photo2cartoon 简介 人像卡通风格渲染的目标是&#xff0c;在保持原图像ID信息和纹理细节的同时&#xff0c;将真实照片转换为卡通风格的非真实感图像。我们的思路是&#xff0c;从大量照片/卡通数据中习得照片到卡通画的映射…

2024年思维导图工具怎样可以轻松选择

思维导图&#xff0c;作为一种直观、有效的思维工具&#xff0c;凭借其强大的信息整理能力和创意激发潜力&#xff0c;逐渐成为了人们学习、工作和生活中不可或缺的一部分。今天&#xff0c;就让我们一起走进这个充满智慧的领域&#xff0c;探索那些2024年大家都在使用的思维导…

Mac安装Typora

文章目录 介绍软件功能下载安装1.下载完成后打开downloads 双击进行安装2.将软件拖到应用程序中3.在程序坞中搜索打开4.提示安全问题就打开通用&#xff0c;安全隐私与设置5.打开成功 小结 介绍 Typora for mac 是一款简洁的轻量级的markdown编辑器、写作软件。它去除了预览窗…

C++求职LinuxWebServer面试篇(项目介绍)

⭐️我叫忆_恒心,一名喜欢书写博客的在读研究生👨‍🎓。 如果觉得本文能帮到您,麻烦点个赞👍呗! 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧,喜欢的小伙伴给个三连支持一下呗。👍⭐️❤️ Qt5.9专栏定期更新Qt的一些项目Demo 项目与…

Tomcat性能调优

Tomcat性能调优 Tomcat9参数配置&#xff1a;Apache Tomcat 9 Configuration Reference (9.0.93) - The HTTP Connector 2.1 如何监控Tomcat的性能 Tomcat 的关键指标 Tomcat 的关键指标有吞吐量、响应时间、错误数、线程池、CPU 以及 JVM 内存。前三个指标是我们最关心的业…

JVM指令重排序

文章目录 什么是指令重排序编译器优化JIT 编译优化处理器优化重排序数据依赖性 硬件层的内存屏障指令重排的代码验证好处减少管道阻塞提高缓存利用率利用并行执行单元性能提升更好地利用硬件资源 问题内存可见性问题编程复杂性增加调试困难 解决方案&#xff1a;Java内存模型&a…