CSS返回上一层扩展按钮效果

<template>
	<!-- 定义一个视图容器，其中包含一个隐藏的复选框（未在代码中体现）作为开关以及一组动态交互的锁图标动画 -->
	<view class="box">
		<!-- 定义一个按钮元素，内部嵌套SVG图标 -->
		<button class="button">
			<!-- SVG图标定义，这里是一个解锁形状的图标 -->
			<svg class="svgIcon" viewBox="0 0 384 512">
				<path
					d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z">
				</path>
			</svg>
		</button>
	</view>
</template>

<script>
	export default {
		// 定义组件的数据对象，当前没有初始化任何数据属性
		data() {
			return {
				// 在此处可以声明并初始化组件内的状态数据
				// 示例：
				// checked: false // 假设有一个用于控制复选框状态的布尔值
			}
		},

		// 页面或组件加载完成后的生命周期钩子函数
		onLoad() {
			// 在此可以编写页面初次加载时的逻辑，如请求服务器数据、初始化变量等操作
		},

		// 定义处理用户交互事件的方法集合
		methods: {
			// 添加具体事件处理方法，比如针对按钮点击事件的回调函数
			// 示例：
			// toggleLockStatus() {
			//   this.checked = !this.checked;
			// }
		}
	}
</script>

<style>
	/* 设置整个应用的基础背景色为深灰色 */
	body {
		background-color: #212121;
	}

	/* 定义包裹按钮和动画效果的.box容器样式 */
	.box {
		margin-top: 350px;
		/* 设置上外边距为350像素 */
	}

	.button {
		width: 50px;
		/* 设置按钮基础宽度 */
		height: 50px;
		/* 设置按钮基础高度 */
		border-radius: 50%;
		/* 圆角设置，使按钮呈现圆形 */
		background-color: rgb(20, 20, 20);
		/* 背景颜色 */
		border: none;
		/* 去除边框 */
		font-weight: 600;
		/* 字体加粗 */
		display: flex;
		/* 使用弹性盒模型布局 */
		align-items: center;
		/* 子元素垂直居中 */
		justify-content: center;
		/* 子元素水平居中 */
		box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
		/* 阴影效果 */
		cursor: pointer;
		/* 鼠标指针变为手形 */
		transition-duration: 0.3s;
		/* 动画过渡持续时间 */
		overflow: hidden;
		/* 隐藏溢出内容 */
		position: relative;
		/* 设置相对定位，以便于绝对定位子元素 */
	}

	.svgIcon {
		width: 12px;
		/* 设置SVG图标的初始宽度 */
		transition-duration: 0.3s;
		/* 图标动画过渡持续时间 */
	}

	.svgIcon path {
		fill: white;
		/* 设置SVG路径填充颜色为白色 */
	}

	.button:hover {
		width: 140px;
		/* 按钮鼠标悬停时的宽度 */
		border-radius: 50px;
		/* 鼠标悬停时圆角更大 */
		transition-duration: 0.3s;
		/* 过渡动画持续时间 */
		background-color: rgb(181, 160, 255);
		/* 鼠标悬停时的背景颜色 */
		align-items: center;
		/* （已默认居中，此句可省略） */
	}

	.button:hover .svgIcon {
		/* width: 20px; */
		/* （注释掉的代码，表示悬停时图标的宽度不变化） */
		transition-duration: 0.3s;
		transform: translateY(-200%);
		/* 悬停时图标向上移动 */
	}

	/* 为按钮添加伪元素，并在按钮下方显示文字提示 */
	.button::before {
		position: absolute;
		/* 设置绝对定位 */
		bottom: -20px;
		/* 初始位置在按钮下部之外 */
		content: "返回上一层";
		/* 显示的文字内容 */
		color: white;
		/* 文字颜色 */
		font-size: 0px;
		/* 初始字号为0，即隐藏文字 */
		/* transition-duration: .3s; （此处未设置过渡动画） */
	}

	.button:hover::before {
		font-size: 13px;
		/* 鼠标悬停时文字字号变大 */
		opacity: 1;
		/* 文字透明度为1，完全可见 */
		bottom: unset;
		/* 移除bottom属性，让文字自动定位 */
		/* transform: translateY(-30px); （此处未使用translateY动画） */
		transition-duration: 0.3s;
		/* 文字出现和消失的过渡动画持续时间 */
	}
</style>