有趣的css - 勾选动效多选框
以下是一个简单的示例，演示了如何使用CSS创建一个有趣的勾选动效多选框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox Toggle Effect</title>
<style>
/* 基本样式 */
.checkbox-container {
display: inline-block;
position: relative;
width: 40px;
height: 20px;
background-color: #ddd;
border-radius: 50px;
cursor: pointer;
}
/* 勾选状态的样式 */
.checkbox-container input[type="checkbox"]:checked + .checkbox-button {
left: calc(100% - 20px);
}
/* 勾选按钮的样式 */
.checkbox-button {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
transition: left 0.3s; /* 添加过渡效果 */
}
</style>
</head>
<body>
<label class="checkbox-container">
<input type="checkbox" />
<span class="checkbox-button"></span>
</label>
</body>
</html>这段代码展示了如何使用HTML和CSS创建一个自定义的多选框勾选动效。当用户勾选时，小圆点会滑动到右侧的位置，提供了一个视觉上的反馈。这个示例简单明了，并且易于理解和实施。
评论已关闭