CSS 放大旋转动画

<template><div class="container" @mouseenter="startAnimation" @mouseleave="stopAnimation"><!-- 旋方块 --><div class="box" :class="{ 'rotate-scale-up': isAnimating }"><!-- 元素内容 --></div></div>
</template><script setup>import {onMounted,ref,watch,onUnmounted} from 'vue';const isAnimating = ref(false); // 控制是否应用动画的响应式状态function startAnimation() {// 鼠标进入容器时,启动动画isAnimating.value = true;}function stopAnimation() {// 鼠标离开容器时,停止动画isAnimating.value = false;}onMounted(() => {setInterval(() => {if(isAnimating.value == false){isAnimating.value = true}else{isAnimating.value = false}}, 500)})// onUnmounted(() => {// 	clearInterval(timer)// });
</script><style>.container {/* 定义容器宽度和高度 */width: 100px;height: 100px;margin-top: 250px;margin-left: 40%;}.box {/* 定义方块宽度和高度 */width: 100px;height: 100px;background-color: blue;}.rotate-scale-up {-webkit-animation: rotate-scale-up 0.65s linear both;animation: rotate-scale-up 0.65s linear both;
}@-webkit-keyframes rotate-scale-up {0% {-webkit-transform: scale(1) rotateZ(0);transform: scale(1) rotateZ(0);}50% {-webkit-transform: scale(2) rotateZ(180deg);transform: scale(2) rotateZ(180deg);}100% {-webkit-transform: scale(1) rotateZ(360deg);transform: scale(1) rotateZ(360deg);}
}
@keyframes rotate-scale-up {0% {-webkit-transform: scale(1) rotateZ(0);transform: scale(1) rotateZ(0);}50% {-webkit-transform: scale(2) rotateZ(180deg);transform: scale(2) rotateZ(180deg);}100% {-webkit-transform: scale(1) rotateZ(360deg);transform: scale(1) rotateZ(360deg);}
}</style>

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

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

相关文章

从零开始搭建企业级前端项目模板(vue3+vite+ts)

文章目录 主要内容一、vite脚手架工具初始化项目二、项目代码加入eslint校验和自动格式化2.1安装对应依赖插件2.2 配置script脚本&#xff0c;项目安装eslint配置2.3 安装完成后&#xff0c;后面启动项目还缺少一些依赖&#xff0c;提前按需安装好 三&#xff0c;修改eslintrc.…

3D目标检测(教程+代码)

随着计算机视觉技术的不断发展&#xff0c;3D目标检测成为了一个备受关注的研究领域。与传统的2D目标检测相比&#xff0c;3D目标检测可以在三维空间中对物体进行定位和识别&#xff0c;具有更高的准确性和适用性。本文将介绍3D目标检测的相关概念、方法和代码实现。 一、3D目…

2023年12月青少年软件编程Python等级考试(三级)真题试卷

2023年12月青少年软件编程Python等级考试&#xff08;三级&#xff09;真题试卷 题目总数&#xff1a;38 总分数&#xff1a;100 选择题 第 1 题 单选题 一个非零的二进制正整数&#xff0c;在其末尾添加两个“0”&#xff0c;则该新数将是原数的&#xff1f;&#x…

nuxt3 env文件、全局变量处理

有两种方向 通过配置nuxt.config.ts Nuxt提供的钩子函数&#xff0c;实现全局变量的获取 runtimeconfig env文件往runtimeconfig放入内容 useAppConfig 通过env文件配置来获取服务端全局变量&#xff0c;客户端通过vite.define实现 nuxt.config.ts Nuxt钩子 1. runtim…

Win32 TEXT()宏学习

之前学习了_T()宏&#xff1b; _T()是MFC的&#xff1b; TEXT()是win32的&#xff1b; _T("")定义于tchar.h&#xff1b; TEXT宏是windows程序设计中经常遇到的宏&#xff0c;定义在 <winnt.h>中&#xff1b; 如果使用UNICODE字符集&#xff0c;则TEXT&…

kubernetes(三)

文章目录 1. k8s弹性伸缩1.1 安装heapster监控1.2 弹性伸缩使用和验证 2. 持久化存储2.1 emptyDir 1. k8s弹性伸缩 k8s弹性伸缩&#xff0c;需要附加插件heapster 1.1 安装heapster监控 使用heapster(低版本)可以监控pod压力大不大 使用hpa调节pod数量&#xff0c;自动扩容或…

chatgpt3.5和chatgpt4的区别

ChatGPT4是基于GPT-3模型的一个实例&#xff0c;但ChatGPT4已经进行了进一步的改进和优化。GPT-3&#xff08;第三代生成式预训练模型&#xff09;是OpenAl开发的一个大型语言模型&#xff0c;它在很多自然语言处理任务中表现出色。 ChatGPT4继承了GPT-3的基本架构和能力&…

清风数学建模笔记-聚类算法

K-maens算法&#xff1a; 算法的原理&#xff1a; 在论文中时&#xff0c;可以把一些可以流程化的算法的流程图加上去 优点&#xff1a; 缺点&#xff1a; 点容易受异常值的影响&#xff0c;且受影响较大 k-means算法&#xff1a; 使用SPSS进行聚类分析&#xff1a; S默认使用…

CCNP课程实验-07-OSPF-Trouble-Shooting

目录 实验条件网络拓朴 环境配置开始排错错点1&#xff1a;R1-R2之间认证不匹配错误2&#xff1a;hello包的时间配置不匹配错误3&#xff1a;R2的e0/1接口区域配置不正确错误4&#xff1a;R4的e0/1接口没有配置进OSPF错误5&#xff1a;R2的区域1没有配置成特殊区域错误6&#x…

深度学习 | 多模态算法

AIGC也就是AI内容生成已经成为新一轮人工智能发展的热点和必然趋势&#xff0c;它使得大规模高质量的创作变得更加容易。 一 、InstructGPT模型 1、GPT系列回顾 chatGPT和InstructGPT都使用了指示学习和基于人工反馈的强化学习来指导模型的训练&#xff0c;不同点仅仅是在采集数…

Python 面向对象(1)

#什么是面向对象 面向对象是一种编程范式&#xff0c;它将程序中的数据和操作封装在一个对象中&#xff0c;从而使得程序更加模块化、可重用和易于维护。在面向对象编程中&#xff0c;对象是类的实例化&#xff0c;类是一种抽象的数据类型&#xff0c;它定义了一组属性和方法。…

用Python实现组件化大屏

实现组件化大屏主要涉及到前端和后端的开发。这里&#xff0c;我会为你提供一个简单的Python后端示例&#xff0c;以及一个前端组件化的示例。 1. Python后端 首先&#xff0c;你需要一个Python后端来提供数据。这里我们使用Flask作为示例&#xff1a; python复制代码 from …

c语言:用结构体求平均分|练习题

一、题目 用c语言的结构体&#xff0c;求4位学生成绩的平均分 如图&#xff1a; 二、代码截图【带注释】 三、源代码【带注释】 #include <stdio.h> float aver();//声明平均分函数 void printScore();//声明打印函数 //设置结构体&#xff0c; struct student { …

JMeter CSV 参数文件的使用方法

.在 JMeter 测试中&#xff0c;参数化是非常重要的&#xff0c;参数化允许我们模拟真实世界中的各种情况。本文我们将探讨如何在 JMeter 中使用 CSV 参数文件。 创建 CSV 文件 首先&#xff0c;我们需要创建一个逗号分隔的值&#xff08;CSV&#xff09;文件&#xff0c;其中…

Unity Hub 无法激活许可证

烦死了~ &#x1f635;‍&#x1f4ab; 卸载UnityHub, 安装旧版本&#x1f448;激活许可证&#xff0c; 如果出现旧版本无法识别Editor的情况需要卸载了再装最新版本的UnityHub

CompressAI:深度学习与传统图像压缩

1、图像压缩算法原理 传统的有损图像压缩方法&#xff0c;如JPEG &#xff0c; JPEG2000 &#xff0c; HEVC或AV1或VVC&#xff0c;在类似的编码方案上进行了迭代改进&#xff1a;将图像划分为像素块&#xff0c;使用变换域通过线性变换(例如:DCT或DWT)去相关空间频率&#xf…

Unity 获取组件宽高的方法

在Unity中&#xff0c;我们要获取组件的宽高&#xff0c;具体方法要看组件的类型。 假如是2D UI组件&#xff0c;那么我们可以通过RectTransform的Rect属性获取&#xff0c;如获取Image 组件宽高&#xff1a; Image image GetComponent<Image>(); RectTransform rectT…

SpringBoot使用支付宝沙箱环境进行仿真支付

目录 一、进入支付宝开发平台—沙箱环境 二、点击沙箱进入沙箱环境 三、Java二维码生成技术 1、导入依赖 2、生成指定url对应的二维码图片 四、支付接口 1、保存好沙箱应用里面的公钥私钥 2、 测试接口 3、扫码 4、买家结果 5、卖家结果 五、回调接口 1、使用内网…

el-select 多选,选有一个未选择的选项

多选有未选择这个选项后。会出现一个情况&#xff0c;绑定的数据为[‘未选择’,‘cpu1’,‘cpu2’] 进行一个处理&#xff0c;选择&#xff08;未选择&#xff09;就清除&#xff08;其它的选择&#xff09;&#xff0c;选择&#xff08;cpu&#xff09;就清除&#xff08;未选…

运营笔记记录

运营笔记 要想读懂一本书&#xff0c;学会书中的能力。就一定要了解书中的观点。拆分出框架。将认知与方法拆分。落地方法不足的一定要查阅其他书籍或者资料将落地的方法补齐。认知是框架。真正需要精通并使用的是具体的落地方法。 一、世界观 运营的核心思想&#xff1a;产…