这段代码创建了一个带有动态勾选效果的选项卡，通过CSS技术实现了复选框的动态效果和烟花效果，为页面添加了视觉吸引力和用户交互体验。
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号关注：前端Hardy</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: #e8e8e8;
}
.title {
position: absolute;
top: -6px;
left: 66px;
}
#checklist {
--background: #fff;
--text: #414856;
--check: #4f29f0;
--disabled: #c3c8de;
--width: 100px;
--height: 180px;
--border-radius: 10px;
background: var(--background);
width: var(--width);
height: var(--height);
border-radius: var(--border-radius);
position: relative;
box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
padding: 30px 85px;
display: grid;
grid-template-columns: 30px auto;
align-items: center;
justify-content: center;
}
#checklist label {
color: var(--text);
position: relative;
cursor: pointer;
display: grid;
align-items: center;
width: fit-content;
transition: color 0.3s ease;
margin-right: 20px;
}
#checklist label::before,
#checklist label::after {
content: "";
position: absolute;
}
#checklist label::before {
height: 2px;
width: 8px;
left: -27px;
background: var(--check);
border-radius: 2px;
transition: background 0.3s ease;
}
#checklist label:after {
height: 4px;
width: 4px;
top: 8px;
left: -25px;
border-radius: 50%;
}
#checklist input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
height: 15px;
width: 15px;
outline: none;
border: 0;
margin: 0 15px 0 0;
cursor: pointer;
background: var(--background);
display: grid;
align-items: center;
margin-right: 20px;
}
#checklist input[type="checkbox"]::before,
#checklist input[type="checkbox"]::after {
content: "";
position: absolute;
height: 2px;
top: auto;
background: var(--check);
border-radius: 2px;
}
#checklist input[type="checkbox"]::before {
width: 0px;
right: 60%;
transform-origin: right bottom;
}
#checklist input[type="checkbox"]::after {
width: 0px;
left: 40%;
transform-origin: left bottom;
}
#checklist input[type="checkbox"]:checked::before {
animation: check-01 0.4s ease forwards;
}
#checklist input[type="checkbox"]:checked::after {
animation: check-02 0.4s ease forwards;
}
#checklist input[type="checkbox"]:checked+label {
color: var(--disabled);
animation: move 0.3s ease 0.1s forwards;
}
#checklist input[type="checkbox"]:checked+label::before {
background: var(--disabled);
animation: slice 0.4s ease forwards;
}
#checklist input[type="checkbox"]:checked+label::after {
animation: firework 0.5s ease forwards 0.1s;
}
@keyframes move {
50% {
padding-left: 8px;
padding-right: 0px;
}
100% {
padding-right: 4px;
}
}
@keyframes slice {
60% {
width: 100%;
left: 4px;
}
100% {
width: 100%;
left: -2px;
padding-left: 0;
}
}
@keyframes check-01 {
0% {
width: 4px;
top: auto;
transform: rotate(0);
}
50% {
width: 0px;
top: auto;
transform: rotate(0);
}
51% {
width: 0px;
top: 8px;
transform: rotate(45deg);
}
100% {
width: 5px;
top: 8px;
transform: rotate(45deg);
}
}
@keyframes check-02 {
0% {
width: 4px;
top: auto;
transform: rotate(0);
}
50% {
width: 0px;
top: auto;
transform: rotate(0);
}
51% {
width: 0px;
top: 8px;
transform: rotate(-45deg);
}
100% {
width: 10px;
top: 8px;
transform: rotate(-45deg);
}
}
@keyframes firework {
0% {
opacity: 1;
box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;
}
30% {
opacity: 1;
}
100% {
opacity: 0;
box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0;
}
}
</style>
</head>
<body>
<div id="checklist">
<h4 class="title">最菜NBA球星是谁？</h4>
<input checked="" value="1" name="r" type="checkbox" id="01">
<label for="01">大帝</label>
<input value="2" name="r" type="checkbox" id="02">
<label for="02">乔治</label>
<input value="3" name="r" type="checkbox" id="03">
<label for="03">比尔</label>
</div>
</body>
</html>
HTML 结构
- checklist: 创建一个id为“checklist”的div元素，用于包含调查问卷的各个部分。
- title: 显示调查问卷的标题。
- checkbox: 每个复选框和标签代表一个选项。
- input: 创建一个复选框，用于用户选择。
- label: 创建一个标签，用于显示选项的文本内容。
CSS 样式
- body: 设置页面的边距、填充、高度、显示方式和对齐方式，背景色为浅灰色。
- .title: 设置标题的样式，包括位置和偏移。
- #checklist: 设置调查问卷的样式，包括背景色、尺寸、圆角、阴影、内边距和网格布局。
- #checklist label: 设置标签的样式，包括颜色、位置、光标和过渡效果。
- #checklist label::before, #checklist label::after: 设置标签的伪元素，用于创建动态效果。
- #checklist input:type="checkbox": 设置复选框的样式，包括外观、位置、尺寸和光标。
- #checklist inpu::before, #checklist input::after: 设置复选框的伪元素，用于创建勾选效果。
- @keyframes move, @keyframes slice, @keyframes check-01, @keyframes check-02, @keyframes firework: 定义各种动画效果，用于实现复选框的动态勾选和烟花效果。
