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>

教学视频地址

点击跳转教学视频

相关推荐
夏梦春蝉1 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室2 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子3 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W4 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端5 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~5 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程5 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏5 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083166 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头7 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github