效果演示
实现了一个复选框的动画效果,当复选框被选中时,复选框的前面会出现一个勾号,同时复选框的背景颜色会变成灰色,复选框旁边会出现一个火花效果。当复选框被取消选中时,复选框的勾号会消失,复选框的背景颜色会变回原来的颜色,火花效果也会消失。
Code
<div id="checklist">
<input checked="" value="1" name="r" type="checkbox" id="01">
<label for="01">Bread</label>
<input value="2" name="r" type="checkbox" id="02">
<label for="02">Cheese</label>
<input value="3" name="r" type="checkbox" id="03">
<label for="03">Coffee</label>
</div>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #212121;
}
#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;
}
}
实现思路拆分
cbody {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #212121;
}
这段代码定义了整个页面的样式,包括高度、居中显示、背景颜色等。
#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;
}
}
这段代码定义了复选框列表中的复选框动画效果,包括动画名称、关键帧、缓动函数等。