<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;margin: 0;
}
input[type='checkbox']{
margin: 100px;
-webkit-appearance: none; /* 限制谷歌浏览器:取消checkbox默认外观 */
display: inline-block;
width: 120px;
height: 50px;
border: #DAA520 solid 10px;
border-radius: 50px;
transition: 1s; /* 执行时间为1s */
}
input[type='checkbox']::after{
content:""; /* content:""不可少,不然无法对伪元素进行操作 */
display: inline-block;
width: 40px;
height: 40px;
border-radius: 40px;
background: linear-gradient(to bottom,#ff0000,#ffaa00); /* 背景颜色线性渐变 */
position: relative;
top: -5px;
box-shadow:1px 0px 5px 0px black inset; /* 阴影 */
transition: transform 0.5s; /* 过渡转换结合 */
}
input[type='checkbox']:checked{
background-color: red;
}
input[type='checkbox']:checked::after{
background: linear-gradient(to bottom,#000000,#ffaa00);
transform:translate(60px,0px); /* 转换,translate(x,y)方法改变位置 */
}
</style>
</head>
<body>
<input type="checkbox" />
</body>
</html>
初始状态:
点击后: