Tailwind CSS Toggle Components
7 Components
Tailwind CSS Toggle Components
<section class="p-6 bg-white rounded-lg shadow-sm">
<div class="max-w-md mx-auto space-y-6">
<!-- 尺寸示例 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">Toggle Sizes</h3>
<div class="space-y-6">
<!-- 超小尺寸 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-7 h-4 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-blue-600"></div>
</label>
<span class="text-sm text-gray-700">Extra Small</span>
</div>
<!-- 小尺寸 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
</label>
<span class="text-sm text-gray-700">Small</span>
</div>
<!-- 中尺寸（默认） -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
<span class="text-sm text-gray-700">Medium (Default)</span>
</div>
<!-- 大尺寸 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600"></div>
</label>
<span class="text-sm text-gray-700">Large</span>
</div>
<!-- 超大尺寸 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-16 h-8 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-7 after:w-7 after:transition-all peer-checked:bg-blue-600"></div>
</label>
<span class="text-sm text-gray-700">Extra Large</span>
</div>
</div>
</div>
<!-- 响应式尺寸 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">Responsive Toggle</h3>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-9 h-5 sm:w-11 sm:h-6 md:w-14 md:h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 sm:after:h-5 sm:after:w-5 md:after:h-6 md:after:w-6 after:transition-all peer-checked:bg-blue-600"></div>
</label>
<span class="text-sm text-gray-700">Responsive size based on screen width</span>
</div>
</div>
</div>
</section>
<section class="p-6 bg-white rounded-lg shadow-sm">
<div class="max-w-md mx-auto space-y-6">
<!-- 基本加载状态开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">基本加载状态开关</h3>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-wait">
<input type="checkbox" class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
<!-- 加载指示器 -->
<svg class="animate-spin h-4 w-4 text-blue-600 absolute top-1 left-1 z-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
<span class="ml-3 text-sm font-medium text-gray-900">处理中...</span>
</label>
</div>
</div>
<!-- 带背景遮罩的加载状态 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">带背景遮罩的加载状态</h3>
<div class="relative">
<div class="flex items-center gap-2">
<label class="inline-flex items-center">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900">已启用</span>
</label>
</div>
<!-- 遮罩层 -->
<div class="absolute inset-0 bg-white bg-opacity-60 flex items-center justify-center cursor-wait">
<svg class="animate-spin h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
</div>
</div>
<!-- 加载中脉冲效果 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">加载中脉冲效果</h3>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-wait">
<input type="checkbox" class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 pulse-loading"></div>
<span class="ml-3 text-sm font-medium text-gray-900">处理中</span>
</label>
</div>
<style>
@keyframes pulseLoading {
0%, 100% {
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
}
50% {
box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
}
}
.pulse-loading {
animation: pulseLoading 1.5s infinite;
}
</style>
</div>
<!-- 加载中带文本变化 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">加载中带文本变化</h3>
<div class="flex flex-col gap-2">
<div class="flex items-center">
<label class="inline-flex items-center cursor-wait">
<input type="checkbox" class="sr-only peer loading-toggle">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
<!-- 加载指示器 -->
<svg class="animate-spin h-4 w-4 text-blue-600 absolute top-1 left-1 z-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
</label>
<div class="ml-3">
<div class="text-sm font-medium text-gray-900 loading-text-initial">点击启用</div>
<div class="text-sm font-medium text-blue-600 loading-text-loading hidden">正在处理请求...</div>
<div class="text-sm font-medium text-green-600 loading-text-success hidden">已成功启用！</div>
</div>
</div>
<button onclick="simulateLoading()" class="mt-1 px-4 py-1 text-xs text-white bg-blue-600 rounded-md hover:bg-blue-700">模拟加载</button>
</div>
<script>
function simulateLoading() {
const toggle = document.querySelector('.loading-toggle');
const initialText = document.querySelector('.loading-text-initial');
const loadingText = document.querySelector('.loading-text-loading');
const successText = document.querySelector('.loading-text-success');
// 显示加载状态
initialText.classList.add('hidden');
loadingText.classList.remove('hidden');
successText.classList.add('hidden');
// 3秒后显示成功
setTimeout(() => {
toggle.checked = true;
loadingText.classList.add('hidden');
successText.classList.remove('hidden');
// 2秒后重置
setTimeout(() => {
initialText.classList.remove('hidden');
successText.classList.add('hidden');
toggle.checked = false;
}, 2000);
}, 3000);
}
</script>
</div>
<!-- 禁用状态加载中 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">禁用状态加载中</h3>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-not-allowed">
<input type="checkbox" disabled class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-100 border border-gray-200 peer-focus:outline-none rounded-full peer opacity-60 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all">
<!-- 加载指示器 -->
<svg class="animate-spin h-4 w-4 text-gray-400 absolute top-[3px] left-[3px] z-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
<span class="ml-3 text-sm font-medium text-gray-400">系统维护中</span>
</label>
</div>
</div>
</div>
</section>
<section class="p-6 bg-white rounded-lg shadow-sm">
<div class="max-w-md mx-auto space-y-6">
<!-- 带图标的开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">带图标的开关</h3>
<div class="space-y-6">
<!-- 基础图标开关 (太阳/月亮) -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<span class="mr-3 text-sm font-medium text-gray-900">切换主题</span>
<input type="checkbox" class="sr-only peer">
<div class="relative w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:flex after:justify-center after:items-center after:transition-all peer-checked:bg-blue-600">
<!-- 太阳图标 (未选中状态) -->
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-[3px] top-[3px] h-5 w-5 text-yellow-500 peer-checked:opacity-0 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
<!-- 月亮图标 (选中状态) -->
<svg xmlns="http://www.w3.org/2000/svg" class="absolute right-[3px] top-[3px] h-5 w-5 text-blue-200 opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg>
</div>
</label>
</div>
<!-- 开/关图标开关 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-green-600">
<!-- 关闭图标 (未选中状态) -->
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-[3px] top-[3px] h-5 w-5 text-gray-400 peer-checked:opacity-0 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<!-- 开启图标 (选中状态) -->
<svg xmlns="http://www.w3.org/2000/svg" class="absolute right-[3px] top-[3px] h-5 w-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<span class="ml-3 text-sm font-medium text-gray-900">系统状态</span>
</label>
</div>
<!-- 音频开关 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-purple-600">
<!-- 静音图标 (未选中状态) -->
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-[3px] top-[3px] h-5 w-5 text-gray-400 peer-checked:opacity-0 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"></path>
</svg>
<!-- 音量图标 (选中状态) -->
<svg xmlns="http://www.w3.org/2000/svg" class="absolute right-[3px] top-[3px] h-5 w-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"></path>
</svg>
</div>
<span class="ml-3 text-sm font-medium text-gray-900">静音/取消静音</span>
</label>
</div>
</div>
</div>
<!-- 带文本标签的图标开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">带文本标签的图标开关</h3>
<div class="space-y-6">
<!-- 在按钮上显示文本 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-16 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600">
<span class="absolute left-1 text-[10px] font-medium text-gray-900 peer-checked:opacity-0">关闭</span>
<span class="absolute right-1 text-[10px] font-medium text-white opacity-0 peer-checked:opacity-100">开启</span>
</div>
</label>
</div>
<!-- 英文ON/OFF文本 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-16 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-green-600">
<span class="absolute left-1 text-[10px] font-medium text-gray-900 peer-checked:opacity-0">OFF</span>
<span class="absolute right-1 text-[10px] font-medium text-white opacity-0 peer-checked:opacity-100">ON</span>
</div>
<span class="ml-3 text-sm font-medium text-gray-900">电源</span>
</label>
</div>
</div>
</div>
<!-- 双色图标开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">双色图标开关</h3>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-14 h-7 bg-red-500 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-red-300 rounded-full peer peer-checked:bg-green-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all">
<!-- 红灯图标 (未选中状态) -->
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-[3px] top-[3px] h-5 w-5 text-white peer-checked:opacity-0 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<!-- 绿灯图标 (选中状态) -->
<svg xmlns="http://www.w3.org/2000/svg" class="absolute right-[3px] top-[3px] h-5 w-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<span class="ml-3 text-sm font-medium text-gray-900">系统状态</span>
</label>
</div>
</div>
</div>
</section>
<section class="p-6 bg-white rounded-lg shadow-sm">
<div class="max-w-md mx-auto space-y-6">
<!-- 禁用状态开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">禁用状态开关</h3>
<div class="space-y-6">
<!-- 未选中禁用 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-not-allowed">
<input type="checkbox" disabled class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-100 border border-gray-200 peer-focus:outline-none rounded-full peer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all opacity-60"></div>
</label>
<span class="text-sm text-gray-500">未选中禁用</span>
</div>
<!-- 选中禁用 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-not-allowed">
<input type="checkbox" checked disabled class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-100 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-300 opacity-60"></div>
</label>
<span class="text-sm text-gray-500">选中禁用</span>
</div>
</div>
</div>
<!-- 带标签的禁用开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">带标签的禁用开关</h3>
<div class="space-y-6">
<!-- 带标签的未选中禁用 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-not-allowed">
<input type="checkbox" disabled class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-100 peer-focus:outline-none rounded-full peer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all opacity-60"></div>
<span class="ml-3 text-sm font-medium text-gray-400">启用通知</span>
</label>
</div>
<!-- 带标签的选中禁用 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-not-allowed">
<span class="mr-3 text-sm font-medium text-gray-400">暗黑模式</span>
<input type="checkbox" checked disabled class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-100 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-300 opacity-60"></div>
</label>
</div>
</div>
</div>
<!-- 带描述的禁用开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">带描述的禁用开关</h3>
<div class="flex items-start">
<div class="flex items-center h-5">
<label class="inline-flex items-center cursor-not-allowed">
<input type="checkbox" disabled checked class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-100 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-300 opacity-60"></div>
</label>
</div>
<div class="ml-3 text-sm">
<label class="font-medium text-gray-400">电子邮件更新</label>
<p class="text-gray-400">在发布新功能时获取通知</p>
</div>
</div>
</div>
<!-- 在表单中的禁用开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">在表单中的禁用开关</h3>
<fieldset class="border border-gray-200 rounded-lg p-4">
<legend class="text-sm font-medium text-gray-500 px-2">隐私设置 (禁用)</legend>
<div class="space-y-3">
<div class="flex items-start">
<div class="flex items-center h-5">
<label class="inline-flex items-center cursor-not-allowed">
<input type="checkbox" disabled class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-100 peer-focus:outline-none rounded-full peer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all opacity-60"></div>
</label>
</div>
<div class="ml-3 text-sm">
<label class="font-medium text-gray-400">记住我</label>
<p class="text-gray-400">在此设备上保持登录状态</p>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<label class="inline-flex items-center cursor-not-allowed">
<input type="checkbox" checked disabled class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-100 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-300 opacity-60"></div>
</label>
</div>
<div class="ml-3 text-sm">
<label class="font-medium text-gray-400">使用数据</label>
<p class="text-gray-400">允许我们收集匿名使用数据</p>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</section>
<section class="p-6 bg-white rounded-lg shadow-sm">
<div class="max-w-md mx-auto space-y-6">
<!-- 颜色示例 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">Toggle Colors</h3>
<div class="space-y-6">
<!-- 默认颜色 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-gray-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gray-600"></div>
</label>
<span class="text-sm text-gray-700">Default</span>
</div>
<!-- 主要颜色 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
<span class="text-sm text-blue-700">Primary</span>
</div>
<!-- 次要颜色 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
</label>
<span class="text-sm text-purple-700">Secondary</span>
</div>
<!-- 成功颜色 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
</label>
<span class="text-sm text-green-700">Success</span>
</div>
<!-- 警告颜色 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-yellow-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-yellow-500"></div>
</label>
<span class="text-sm text-yellow-700">Warning</span>
</div>
<!-- 错误颜色 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-red-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-600"></div>
</label>
<span class="text-sm text-red-700">Error</span>
</div>
<!-- 信息颜色 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-sky-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-sky-600"></div>
</label>
<span class="text-sm text-sky-700">Info</span>
</div>
</div>
</div>
<!-- 自定义颜色 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">Custom Colors</h3>
<div class="space-y-6">
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-11 h-6 bg-indigo-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-indigo-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-500"></div>
</label>
<span class="text-sm text-indigo-700">Indigo</span>
</div>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-11 h-6 bg-amber-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-amber-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-amber-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-amber-500"></div>
</label>
<span class="text-sm text-amber-700">Amber</span>
</div>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-11 h-6 bg-emerald-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-emerald-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
</label>
<span class="text-sm text-emerald-700">Emerald</span>
</div>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-11 h-6 bg-rose-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-rose-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-rose-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-rose-500"></div>
</label>
<span class="text-sm text-rose-700">Rose</span>
</div>
</div>
</div>
</div>
</section>
<section class="p-6 bg-white rounded-lg shadow-sm">
<div class="max-w-md mx-auto space-y-6">
<!-- 基本开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">Basic Toggle</h3>
<div class="flex items-center">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</div>
</div>
<!-- 带标签的开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">Toggle with Label</h3>
<div class="flex items-center">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900">Enable notifications</span>
</label>
</div>
<div class="flex items-center">
<label class="inline-flex items-center cursor-pointer">
<span class="mr-3 text-sm font-medium text-gray-900">Dark mode</span>
<input type="checkbox" class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</div>
</div>
<!-- 带描述的开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">Toggle with Description</h3>
<div class="flex items-start">
<div class="flex items-center h-5">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</div>
<div class="ml-3 text-sm">
<label class="font-medium text-gray-900">Email updates</label>
<p class="text-gray-500">Get notified when new features are released</p>
</div>
</div>
</div>
<!-- 在表单组中的开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">Toggle in Form Group</h3>
<fieldset class="border border-gray-300 rounded-lg p-4">
<legend class="text-sm font-medium text-gray-700 px-2">Privacy settings</legend>
<div class="space-y-3">
<div class="flex items-start">
<div class="flex items-center h-5">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</div>
<div class="ml-3 text-sm">
<label class="font-medium text-gray-900">Remember me</label>
<p class="text-gray-500">Stay signed in on this device</p>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</div>
<div class="ml-3 text-sm">
<label class="font-medium text-gray-900">Usage data</label>
<p class="text-gray-500">Allow us to collect anonymous usage data</p>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</section>
<section class="p-6 bg-white rounded-lg shadow-sm">
<div class="max-w-md mx-auto space-y-6">
<!-- 弹跳动画开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">弹跳动画开关</h3>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all after:duration-300 after:ease-bounce peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900">弹跳效果</span>
</label>
</div>
<style>
.ease-bounce {
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
</style>
</div>
<!-- 慢速动画开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">慢速动画开关</h3>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all after:duration-1000 after:ease-in-out peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900">慢速效果</span>
</label>
</div>
</div>
<!-- 颜色渐变开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">颜色渐变开关</h3>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer transition-colors duration-500 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all after:duration-300 peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900">颜色渐变</span>
</label>
</div>
</div>
<!-- 缩放动画开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">缩放动画开关</h3>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer transition-colors duration-300 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all after:duration-200 peer-checked:bg-green-600 peer-checked:after:scale-90 peer-active:after:scale-75 after:ease-scale"></div>
<span class="ml-3 text-sm font-medium text-gray-900">缩放效果</span>
</label>
</div>
<style>
.ease-scale {
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
</style>
</div>
<!-- 脉冲效果开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">脉冲效果开关</h3>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 rounded-full peer transition-colors duration-300 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all after:duration-300 peer-checked:bg-purple-600 pulse-animation"></div>
<span class="ml-3 text-sm font-medium text-gray-900">脉冲效果</span>
</label>
</div>
<style>
@keyframes pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4);
}
50% {
box-shadow: 0 0 0 6px rgba(124, 58, 237, 0);
}
}
input:checked ~ .pulse-animation::after {
animation: pulse 1.5s infinite;
}
</style>
</div>
<!-- 摇动效果开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">摇动效果开关</h3>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-red-300 rounded-full peer transition-colors duration-300 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all after:duration-300 peer-checked:bg-red-600 shake-animation"></div>
<span class="ml-3 text-sm font-medium text-gray-900">摇动效果</span>
</label>
</div>
<style>
@keyframes shake {
0%, 100% {
transform: translateX(calc(var(--translate-x, 0) + 0px));
}
20%, 60% {
transform: translateX(calc(var(--translate-x, 0) + 1px));
}
40%, 80% {
transform: translateX(calc(var(--translate-x, 0) - 1px));
}
}
input:not(:checked):active ~ .shake-animation::after {
--translate-x: 0;
animation: shake 0.3s;
}
input:checked:active ~ .shake-animation::after {
--translate-x: 100%;
animation: shake 0.3s;
}
</style>
</div>
</div>
</section>
Copied to clipboard