穆棱建设局网站,分类信息网站有哪些,网站优化建设绵阳,云南网站建设找天软效果演示 实现了一个复选框的动画效果#xff0c;当复选框被选中时#xff0c;复选框的前面会出现一个勾号#xff0c;同时复选框的背景颜色会变成灰色#xff0c;复选框旁边会出现一个火花效果。当复选框被取消选中时#xff0c;复选框的勾号会消失#xff0c;复选框的背…
效果演示 实现了一个复选框的动画效果当复选框被选中时复选框的前面会出现一个勾号同时复选框的背景颜色会变成灰色复选框旁边会出现一个火花效果。当复选框被取消选中时复选框的勾号会消失复选框的背景颜色会变回原来的颜色火花效果也会消失。 Code
div idchecklistinput checked value1 namer typecheckbox id01label for01Bread/labelinput value2 namer typecheckbox id02label for02Cheese/labelinput value3 namer typecheckbox id03label for03Coffee/label
/divbody {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[typecheckbox] {-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[typecheckbox]::before,
#checklist input[typecheckbox]::after {content: ;position: absolute;height: 2px;top: auto;background: var(--check);border-radius: 2px;
}#checklist input[typecheckbox]::before {width: 0px;right: 60%;transform-origin: right bottom;
}#checklist input[typecheckbox]::after {width: 0px;left: 40%;transform-origin: left bottom;
}#checklist input[typecheckbox]:checked::before {animation: check-01 0.4s ease forwards;
}#checklist input[typecheckbox]:checked::after {animation: check-02 0.4s ease forwards;
}#checklist input[typecheckbox]:checkedlabel {color: var(--disabled);animation: move 0.3s ease 0.1s forwards;
}#checklist input[typecheckbox]:checkedlabel::before {background: var(--disabled);animation: slice 0.4s ease forwards;
}#checklist input[typecheckbox]:checkedlabel::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[typecheckbox] {-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[typecheckbox]::before,
#checklist input[typecheckbox]::after {content: ;position: absolute;height: 2px;top: auto;background: var(--check);border-radius: 2px;
}这段代码定义了复选框列表中的复选框前面的和后面的样式包括内容、位置、高度、背景、边框半径等。
#checklist input[typecheckbox]::before {width: 0px;right: 60%;transform-origin: right bottom;
}这段代码定义了复选框列表中的复选框前面的样式包括宽度、右边距、变换原点等。
#checklist input[typecheckbox]::after {width: 0px;left: 40%;transform-origin: left bottom;
}这段代码定义了复选框列表中的复选框后面的样式包括宽度、左边距、变换原点等。
#checklist input[typecheckbox]:checked::before {animation: check-01 0.4s ease forwards;
}这段代码定义了复选框列表中的复选框被选中时的前面的动画效果包括动画名称、持续时间、缓动函数、前向播放等。
#checklist input[typecheckbox]:checked::after {animation: check-02 0.4s ease forwards;
}这段代码定义了复选框列表中的复选框被选中时的后面的动画效果包括动画名称、持续时间、缓动函数、前向播放等。
#checklist input[typecheckbox]:checkedlabel {color: var(--disabled);animation: move 0.3s ease 0.1s forwards;
}这段代码定义了复选框列表中的复选框被选中时的标签样式包括颜色、动画名称、持续时间、缓动函数、前向播放、动画效果等。
#checklist input[typecheckbox]:checkedlabel::before {background: var(--disabled);animation: slice 0.4s ease forwards;
}这段代码定义了复选框列表中的复选框被选中时的前面的样式包括背景、动画名称、持续时间、缓动函数、前向播放、动画效果等。
#checklist input[typecheckbox]:checkedlabel::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;}
}这段代码定义了复选框列表中的复选框动画效果包括动画名称、关键帧、缓动函数等。
