Toggle Animations
<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