CSS 开关锁动画效果_vue css开关锁的效果

<template>
	<!-- 定义一个视图容器，它包括一个隐藏的复选框作为开关以及一组动态交互的锁图标动画 -->
	<view class="box">
		<!-- label与隐藏的checkbox关联，当点击label时触发checkbox的切换 -->
		<label for="lock" class="lock-label">
			<!-- 包裹SVG图形的容器，用于旋转动画 -->
			<span class="lock-wrapper">
				<!-- 锁链图形，用于悬停时的翻转动画 -->
				<span class="shackle"></span>
				<!-- 锁体SVG图形 -->
				<svg class="lock-body" width="" height="" viewBox="0 0 28 28" fill="none"
					xmlns="http://www.w3.org/2000/svg">
					<!-- SVG路径描绘了锁的主体形状，填充白色 -->
					<path fill-rule="evenodd" clip-rule="evenodd"
						d="M0 5C0 2.23858 2.23858 0 5 0H23C25.7614 0 28 2.2385