纯css实现动态背景的checkbox选择框
代码语言：html
所属分类：表单美化
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.plane-switch {
--dot: #fff;
--street: #6B6D76;
--street-line: #A8AAB4;
--street-line-mid: #C0C2C8;
--sky-1: #60A7FA;
--sky-2: #2F8EFC;
--light-1: rgba(255, 233, 0, 1);
--light-2: rgba(255, 233, 0, .3);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.plane-switch input {
display: none;
}
.plane-switch input + div {
-webkit-mask-image: -webkit-radial-gradient(white, black);
position: relative;
overflow: hidden;
width: 50px;
height: 25px;
padding: 1px;
border-radius: 13px;
background: linear-gradient(90deg, var(--street) 0%, var(--street) 25%, var(--sky-1) 75%, var(--sky-2) 100%) left var(--p, 0%) top 0;
background-position-x: var(--p,0%);
background-size: 400% auto;
transition: background-position .6s;
}
.plane-switch input + div:before, .plane-switch input + div:after {
content: '';
display: block;
position: absolute;
-webkit-transform: translateX(var(--s,0));
transform: translateX(var(--s,0));
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
}
.plane-switch input + div:before {
width: 42px;
right: 2px;
top: 4px;
height: 1px;
background: var(--street-line);
box-shadow: 0 16px 0 0 var(--street-line);
}
.plane-switch input + div:after {
width: 2px;
height: 2px;
border-radius: 50%;
left: 23px;
top: 1px;
-webkit-animation: lights 2s linear infinite;
animation: lights 2s linear infinite;
box-shadow: inset 0 0 0 2px var(--light-1), 0 21px 0 var(--light-1), 8px 0 0 var(--light-2), 8px 21px 0 var(--light-2), 16px 0 0 var(--light-2), 16px 21px 0 var(--light-2);
}
.plane-switch input + div span {
display: block;
position: absolute;
}
.plane-switch input + div span.street-middle {
top: 12px;
left: 21px;
width: 3px;
height: 1px;
-webkit-transform: translateX(var(--s,0));
transform: translateX(var(--s,0));
background: var(--street-line-mid);
box-shadow: 5px 0 0 var(--street-line-mid), 10px 0 0 var(--street-line-mid), 15px 0 0 var(--street-line-mid), 20px 0 0 var(--street-line-mid), 25px 0 0 var(--street-line-mid);
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
}
.plane-switch input + div span.cloud {
width: 12px;
height: 4px;
border-radius: 2px;
background: #fff;
position: absolute;
top: var(--ct,8px);
left: 100%;
opacity: var(--co,0);
transition: opacity .3s;
-webkit-animation: clouds 2s linear infinite var(--cd, 0s);
animation: clouds 2s linear infinite var(--cd, 0s);
}
.plane-switch input + div span.cloud:before, .plane-switch input + div span.cloud:after {
content: '';
position: absolute;
-webkit-transform: translateX(var(--cx,0));
transform: translateX(var(--cx,0));
border-radius: 50%;
width: var(--cs,5px);
height: var(--cs,5px);
background: #fff;
bottom: 1px;
left: 1px;
}
.plane-switch input + div span.cloud:after {
--cs: 6px;
--cx: 4px;
}
.plane-switch input + div span.cloud.two {
--ct: 20px;
--cd: 1s;
opacity: var(--co-2,0);
}
.plane-switch input + div div {
display: table;
position: relative;
z-index: 1;
padding: 5px;
border-radius: 50%;
background: var(--dot);
-webkit-transform: translateX(var(--x,0));
transform: translateX(var(--x,0));
transition: -webkit-transform 0.6s cubic-bezier(0.2, 0.8, 0.35, 1.2);
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.35, 1.2);
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.35, 1.2), -webkit-transform 0.6s cubic-bezier(0.2, 0.8, 0.35, 1.2);
}
.plane-switch input + div div svg {
width: 13px;
height: 13px;
display: block;
color: var(--c, var(--street));
transition: color .6s;
}
.plane-switch input:checked + div {
--p: 100%;
--x: 25px;
--s: -50px;
--c: var(--sky-2);
--co: .8;
--co-2: .6;
}
@-webkit-keyframes lights {
20%,
30% {
box-shadow: inset 0 0 0 2px var(--light-2), 0 21px 0 var(--light-2), 8px 0 0 var(--light-1), 8px 21px 0 var(--light-1), 16px 0 0 var(--light-2), 16px 21px 0 var(--light-2);
}
55%,
65% {
box-shadow: inset 0 0 0 2px var(--light-2), 0 21px 0 var(--light-2), 8px 0 0 var(--light-2), 8px 21px 0 var(--light-2), 16px 0 0 var(--light-1), 16px 21px 0 var(--light-1);
}
90%,
100% {
box-shadow: inset 0 0 0 2px var(--light-1), 0 21px 0 var(--light-1), 8px 0 0 var(--light-2), 8px 21px 0 var(--light-2), 16px 0 0 var(--light-2), 16px 21px 0 var(--light-2);
}
}
@keyframes lights {
20%,
30% {
box-shadow: inset 0 0 0 2px var(--light-2), 0 21px 0 var(--light-2), 8px 0 0 var(--light-1), 8px 21px 0 var(--light-1), 16px 0 0 var(--light-2), 16px 21px 0 var(--light-2);
}
55%,
65% {
box-shadow: inset 0 0 0 2px var(--light-2), 0 21px 0 var(--light-2), 8px 0 0 var(--light-2), 8px 21px 0 var(--light-2), 16px 0 0 var(--light-1), 16px 21px 0 var(--light-1);
}
90%,
100% {
box-shadow: inset 0 0 0 2px var(--light-1), 0 21px 0 var(--light-1), 8px 0 0 var(--light-2), 8px 21px 0 var(--light-2), 16px 0 0 var(--light-2), 16px 21px 0 var(--light-2);
}
}
@-webkit-keyframes clouds {
97% {
-webkit-transform: translateX(-72px);
transform: translateX(-72px);
visibility: visible;
}
98%,
100% {
visibility: hidden;
}
99% {
-webkit-transform: translateX(-72px);
transform: translateX(-72px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes clouds {
97% {
-webkit-transform: translateX(-72px);
transform: translateX(-72px);
visibility: visible;
}
98%,
100% {
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0