css写一个原生switch开关按钮

最新推荐文章于 2023-10-14 11:22:15 发布

转载最新推荐文章于 2023-10-14 11:22:15 发布 · 502 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.mark-to-win.com/tutorial/50956.html

文章标签：

#css #html #switch

前端专栏收录该内容

101 篇文章

订阅专栏

本文展示了如何使用CSS创建一个具有动画效果的开关按钮，包括背景颜色、边框、圆角和内部滑动元素的动画变换。示例代码详细解释了各个部分的样式设置，助你理解并应用到自己的项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述










<!DOCTYPE html>
<html>
<head>
    <title>switch开关按钮</title>
    <style type="text/css">
#checked {
 width: 60px;
 position: relative;
 margin: 20px auto;
}
.labelBox {
 margin-bottom: 20px;
 background: #409eff;
 border-radius: 40px;
 width: 60px;
 position: relative;
 height: 32px;
}
.check {
 display: block;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background: #fff ;
 border: 1px solid #e5e5e5;
 position: absolute;
 top: 0px;
 left: 0px;
}
input[type=checkbox] {
 border: 0 none !important;
 clip: rect(1px,1px,1px,1px);
 height: 1px !important;
 overflow: hidden !important;
 position: absolute !important;
 width: 1px !important;
}

@keyframes labelON {
 0% {
  top: 0px;
  left: 0px;
 }    
 100% {
  top: 0px;
  left: 28px;
 }
}