演示效果
动画.gif
封面.jpg
实现思路
自定义checkbox默认样式，并添加过渡效果来美化开启和关闭。
代码
html结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
<!--图标样式-->
<!-- <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> -->
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="checkbox" name="" id="custom">
<label for="custom" class="check-box">
<span class="check-handler"></span>
</label>
</body>
</html>
css样式
body {
height: 100vh;
background: rgb(203, 203, 203);
display: flex;
justify-content: center;
align-items: center;
}
input[type="checkbox"] {
position: absolute;
opacity: 0;
z-index: -1;
}
.check-box {
display: flex;
align-items: center;
width: 90px;
height: 50px;
background: #2c3e50;
border-radius: 25px;
transition: all 0.5s ease;
cursor: pointer;
}
.check-handler {
display: flex;
justify-content: center;
align-items: center;
margin-left: 5px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #34495e;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
transition: all 0.5s ease;
}
.check-handler:before {
font-family: "Font Awesome 6 Free";
content: "\f00d";
color: white;
font-size: 1.5em;
font-weight: 900;
}
input[type="checkbox"]:checked+.check-box {
background: #16a085;
}
input[type="checkbox"]:checked+.check-box .check-handler {
margin-left: 50%;
background: #1abc9c;
}
input[type="checkbox"]:checked+.check-box .check-handler:before {
font-family: "Font Awesome 6 Free";
content: "\f00c";
}
gitee地址：siebe/html-css-demo (https://gitee.com/siebe/html-css-demo)
图标来源：图标库Font Awesome中的免费图标。
每天一个网页小实例，生活多姿又多彩。
网友评论