CSS 纵向扩展动画

在这里插入图片描述

上干货

<template>
	<!-- @mouseenter="startAnimation" 表示在鼠标进入元素时触发 startAnimation 方法。
	@mouseleave="stopAnimation" 表示在鼠标离开元素时触发 stopAnimation 方法。 -->
	<!-- 容器元素 -->
	<div class="container" @mouseenter="startAnimation" @mouseleave="stopAnimation">
		<!-- 旋转的方块 -->
		<div class="box" :class="{ 'animate': isAnimating }">
			<!-- 元素内容 -->
		</div>
	</div>
</template>
<script setup>
	import {
		ref
	} from 'vue';


	const isAnimating = ref(false); // 控制是否应用旋转动画的响应式状态
	function startAnimation() {
		// 鼠标进入容器时,启动动画
		isAnimating.value = true;
	}

	function stopAnimation() {
		// 鼠标离开容器时,停止动画
		isAnimating.value = false;
	}
</script>
<style>
	.container {
		/* 定义容器宽度和高度 */
		width: 100px;
		height: 100px;
		margin-top: 50px;
		margin-left: 40%;
	}

	.box {
		/* 定义方块宽度和高度 */
		width: 100px;
		height: 100px;
		background-color: blue;
		/* 定义过渡效果 */
		transition: transform 0.5s;
	}

	/* 应用动画类 */
	.box.animate {
		-webkit-animation: scale-up-tr 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
			        animation: scale-up-tr 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	}

	/* 定义动画 */
	@-webkit-keyframes scale-up-tr {
	  0% {
	    -webkit-transform: scale(0.5);
	            transform: scale(0.5);
	    -webkit-transform-origin: 100% 0%;
	            transform-origin: 100% 0%;
	  }
	  100% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	    -webkit-transform-origin: 100% 0%;
	            transform-origin: 100% 0%;
	  }
	}
	@keyframes scale-up-tr {
	  0% {
	    -webkit-transform: scale(0.5);
	            transform: scale(0.5);
	    -webkit-transform-origin: 100% 0%;
	            transform-origin: 100% 0%;
	  }
	  100% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	    -webkit-transform-origin: 100% 0%;
	            transform-origin: 100% 0%;
	  }
	}

</style>

教学视频地址

点击跳转教学视频

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HCIA-Datacom题库(自己整理分类的)——OSPF协议判断

1.路由表中某条路由信息的Proto为OSPF则此路由的优先级一定为10。√ 2.如果网络管理员没有配置骨干区域,则路由器会自动创建骨干区域&#xff1f; 路由表中某条路由信息的Proto为OSPF&#xff0c;则此路由的优先级一定为10。 当两台OSPF路由器形成2-WAY邻居关系时&#xff0…

Arduino串口发送接收和串口中断事件

目录 一、硬件介绍 1、控制器 2、TTL转USB串口 二、软件程序 1、单片机发送字符串 &#xff08;1&#xff09;每个串口对应的类名称介绍 &#xff08;2&#xff09;发送功能 &#xff08;3&#xff09;代码 &#xff08;4&#xff09;测试 2、单片机接收字符串 &…

【 YOLOv5】目标检测 YOLOv5 开源代码项目调试与讲解实战(3)-训练yolov5模型(本地)

训练yolov5模型&#xff08;本地&#xff09; 训练文件 train.py训练如下图 一些参数的设置weights:对于weight参数&#xff0c;可以往Default参数中填入的参数有 cfg&#xff1a;&#xff08;缩写&#xff09;cfg参数可以选择的网络模型 data对于data hyp 超参数epochs 训练多…

全新ui自动化测试框架教学——Cypress

前言 在现阶段自动化测试领域大规模普及的是selenium及appium等常规自动化测试工具&#xff0c;但在其中会有遇到很多影响因素导致测试结果不理想和不准确的情况发生。在经过Darren洋对自动化测试工具调研后&#xff0c;发现了Cypress这一款针对端到端的自动化测试工具&#xf…

【Python基础】字符串

文章目录 [toc]什么是字符串索引示例索引越界 切片语法示例 字符串方法find()方法rfind()方法count()方法replace()方法 个人主页&#xff1a;丷从心 系列专栏&#xff1a;Python基础 什么是字符串 如下定义的变量url存储的是字符串类型的值 url www.baidu.com print(url)u…

【银行测试】金融银行-理财项目面试/分析总结(二)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 银行理财相关的项…

在Adobe Acrobat上如何做PDF文档签名

Adobe Acrobat如何做PDF文档签名&#xff1f;PDF文档签名是指对PDF文档进行基于证书的数字签名&#xff0c;类似于传统的手写签名&#xff0c;可标识签名文档的人员。与手写签名不同&#xff0c;数字签名难以伪造&#xff0c;因为其包含签名者唯一的加密信息。为PDF文档进行基于…

Starling-LM-7B与GPT-4:开源AI的新纪录

引言 在人工智能的前沿领域&#xff0c;Starling-LM-7B的出现标志着开源大型语言模型&#xff08;LLM&#xff09;的一大突破。与GPT-4的近距离竞争不仅展示了Starling-LM-7B的技术实力&#xff0c;也突显了开源社区在推动AI发展方面的重要作用。 模型特点 Starling-LM-7B&a…

java 企业工程管理系统软件源码+Spring Cloud + Spring Boot +二次开发+ 可定制化

工程项目管理软件是现代项目管理中不可或缺的工具&#xff0c;它能够帮助项目团队更高效地组织和协调工作。本文将介绍一款功能强大的工程项目管理软件&#xff0c;该软件采用先进的Vue、Uniapp、Layui等技术框架&#xff0c;涵盖了项目策划决策、规划设计、施工建设到竣工交付…

通过Python将PDF转为文本,快速提取PDF中的文字

快速高效地从PDF文档中提取信息对于专业人士来说非常重要。处理大量PDF文件时&#xff0c;将PDF转换为可编辑的文本格式可以节省时间和精力。而强大的Python语言正是在这些方面发挥其作用。利用Python中丰富的API&#xff0c;我们可以轻松在Python程序中将PDF转换为文本&#x…

im6ull学习总结(三)文字显示

文字显示 字符编码方式 编码与字体 一个字符以不同编码形式会保存为不同的二进制数。 ASCII American Standard Code for Information Interchange”的缩写&#xff0c;美国信息交换标准代码。 一个字节的 7 位就可以表示 128 个数值&#xff0c;在 ASCII 码中最高位永远是…

天津医科大学临床医学院专升本药学专业有机化学考试大纲

天津医科大学临床医学院高职升本科专业课考试大纲药学专业《有机化学》科目考试大纲 一、考试基本要求 本考试大纲主要要求考生对《有机化学》基本概念有较深入的了解&#xff0c;能够系统地掌握各类化合物的命名、结构特点及立体异构、主要性质、反应、来源和合成制备方法等…

将正规文法转化为正规式

将正规文法转化为正规式有以下几个规则&#xff1a; 通过一道例题来讲解&#xff1a; ①A-->aC|bA ②C-->bD ③D-->aC|bD| (1)首先将②带入③&#xff08;不能将自身带入自身例如D-->aC|bD|,文法中带D&#xff0c;不能带入D&#xff09; DabD|bD|&#xff08;…

用电脑将图片转为excel表格有几种方法?怎么操作?

将图片转为Excel表格&#xff0c;一般需要借助OCR(光学字符识别)技术。OCR技术可以将图片中的文字提取出来&#xff0c;并转换成Excel表格中的数据。以下是几种常用的方法&#xff1a; 一、.使用在线OCR工具 1、打开金鸣表格文字识别&#xff08;简称金鸣识别&#xff09;网站…

第十一章 Stream消息驱动

Stream消息驱动 gitee:springcloud_study: springcloud&#xff1a;服务集群、注册中心、配置中心&#xff08;热更新&#xff09;、服务网关&#xff08;校验、路由、负载均衡&#xff09;、分布式缓存、分布式搜索、消息队列&#xff08;异步通信&#xff09;、数据库集群、…

32阵元 MVDR和DREC DOA估计波束方向图对比

32阵元 MVDR和DREC DOA估计波束方向图对比 一、原理 MVDR原理&#xff1a;https://zhuanlan.zhihu.com/p/457528114 DREC原理&#xff08;无失真响应特征干扰相消器&#xff09;&#xff1a;http://radarst.ijournal.cn/html/2019/3/201903018.html 主要参数&#xff1a; 阵…

Idea如何从磁盘中应用 下载好的插件流程,安装zip压缩包。

1、将下载的插件文件&#xff08;通常是一个ZIP文件&#xff09;复制到IntelliJ IDEA的“plugins”文件夹中。 IDEA版本 2、重启IntelliJ IDEA。 3、在设置窗口中&#xff0c;选择左侧的“Plugins”。 4、选择之前复制到“plugins”文件夹中的插件文件&#xff0c;点击“OK”按…

大数据与人工智能|万物皆算法(第三节)

要点一&#xff1a;数据与智能的关系 1. 一切的核心都是数据&#xff0c;数据和智能之间是密切相关的。 数据是对客观现实的描述&#xff0c;而信息是数据转化而来的。 例如&#xff0c;24是数据&#xff0c;但说“今天的气温是24摄氏度”是信息&#xff0c;而说“班可以分成24…

Unity Shader UVLightReveal (紫外线显示,验钞效果)

Unity Shader UVLightReveal &#xff08;紫外线显示&#xff0c;验钞效果&#xff09; UVLight Reveal 实现验钞机的效果实现方案操作实现1.Light2.将另一个图形加入3.加上图形效果4.加上灯光的颜色自定义判定 源码 UVLight Reveal 实现验钞机的效果 大家应该都有见过验钞机验…

电脑系统坏了用U盘重装系统教程

我们平时办公、学习都会用到电脑&#xff0c;如果电脑系统坏了&#xff0c;就会影响自己正常使用电脑&#xff0c;这时候就可以通过U盘来重装一个正常的操作系统。如果您不知道具体的重装操作步骤&#xff0c;那么可以参考下面小编分享的利用U盘快速完成操作系统重装的步骤介绍…