这是一款CSS3实现绘制3D逼真的拉杆开关按钮动画特效。直接把代码引入页面就可以了。
使用方法
在页面引入以下CSS样式
<style>
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--dur: 0.3s;
--dur2: 0.15s;
font-size: 16px;
}
body {
background-color: #dbdfdb;
}
form {
display: flex;
justify-content: space-between;
align-items: center;
margin: 3em auto 0 auto;
width: 23em;
}
form label {
background-color: #f00;
background-image:
radial-gradient(0.3em 0.25em at 50% 25%, rgb(255,255,255) 25%, rgba(255,255,255,0)),
radial-gradient(0.25em 0.25em at 30% 75%, rgba(255,255,255,0.5), rgba(255,255,255,0)),
radial-gradient(0.3em 0.3em at 60% 80%, rgba(255,255,255,0.5), rgba(255,255,255,0)),
radial-gradient(100% 100%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.3) 40%, rgba(0,0,0,0.5) 50%);
border-radius: 50%;
box-shadow: 0 0 0.75em #f00, 0 0.5em 0.75em rgba(0,0,0,0.3);
display: inline-block;
transition: all var(--dur2) var(--dur2) linear;
width: 1.5em;
height: 1.5em;
}
form label:first-of-type {
background-color: #050;
box-shadow: 0 0.5em 0.75em rgba(0,0,0,0.3);
order: -1;
}
label span {
display: inline-block;
overflow: hidden;
width: 0;
}
/* Lever */
.lever {
background-image:
radial-gradient(1em 1.5em at 50% 50%, rgb(204,204,204) 25%, rgb(170,170,170) 49%, rgba(170,170,170,0) 50%),
radial-gradient(0.65em 1em at 50% 53%, rgb(68,68,68), rgba(68,68,68,0)),
radial-gradient(0.75em 0.75em at 55% 45%, rgb(255,255,255), rgba(255,255,255,0)),
radial-gradient(0.5em 0.4em at 43% 56%, rgba(255,255,255,0.5), rgba(255,255,255,0)),
radial-gradient(0.5em 0.4em at 55% 57%, rgba(255,255,255,0.6), rgba(255,255,255,0)),
radial-gradient(0.5em 0.4em at 50% 60%, rgba(255,255,255,0.6), rgba(255,255,255,0)),
radial-gradient(100% 100% at 50% 50%, rgb(238,238,238), rgb(170,170,170) 10%, rgb(0,0,0) 18%, rgb(0,0,0) 21%, rgb(153,153,153) 21.5%, rgb(153,153,153) 24%, rgba(153,153,153,0) 24.5%, rgba(221,221,221,0) 30%, rgb(221,221,221) 30.5%, rgb(221,221,221) 33%, rgb(68,68,68) 33.5%, rgb(68,68,68) 35%, rgba(68,68,68,0) 35.5%, rgba(221,221,221,0) 41%, rgb(221,221,221) 41.5%, rgb(238,238,238) 45%, rgb(68,68,85) 45.5%, rgb(68,68,85) 49%, rgba(68,68,85,0) 50%),
radial-gradient(2em 2em at 35% 20%, rgb(255,255,255), rgba(255,255,255,0) 2em),
radial-gradient(2em 2em at 65% 80%, rgb(255,255,255), rgba(255,255,255,0) 2em),
radial-gradient(2em 2em at 80% 35%, rgb(255,255,255), rgba(255,255,255,0) 2em),
radial-gradient(2em 2em at 20% 65%, rgb(255,255,255), rgba(255,255,255,0) 2em),
radial-gradient(100% 100% at center, rgb(170,170,170) 49%, rgba(170,170,170,0) 50%);
background-position: 0.5em 0, 0.5em 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
border-radius: 50%;
box-shadow: 0 2em 2em rgba(0,0,0,0.3);
cursor: pointer;
font-size: 1em;
display: block;
outline: 0;
position: relative;
width: 12em;
height: 12em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition: background-position var(--dur) linear;
}
.lever:before, .lever:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
}
.lever:before {
animation: leverAOff var(--dur) linear forwards;
background:
radial-gradient(35% 25% at 50% 25%, rgb(136,136,153) 20%, rgba(136,136,153,0)),
radial-gradient(1em 0.75em at 32% 75%, rgb(102,102,102), rgba(102,102,102,0)),
radial-gradient(1em 0.75em at 65% 78%, rgb(102,102,102), rgba(102,102,102,0)),
radial-gradient(100% 100% at center, rgb(68,68,68) 49.5%, rgba(68,68,68,0) 50%);
box-shadow:
-2em 4em 2em rgba(0,0,0,0.3),
-2em 5em 4em rgba(0,0,0,0.2),
-2em 7em 4em rgba(0,0,0,0.2),
-2em 9em 4em rgba(0,0,0,0.2),
-2em 11em 4em rgba(0,0,0,0.2);
border-radius: 50%;
width: 4em;
height: 4em;
transform: translate(100%,-50%);
z-index: 1;
}
.lever:checked {
background-position: -0.5em 0, -0.5em 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}
.lever:checked:before {
animation: leverAOn var(--dur) linear forwards;
}
.lever:after {
animation: leverBOff var(--dur) linear forwards;
background-color: #333;
border-radius: 15em;
box-shadow: 0 0 1em #667 inset;
width: 7.5em;
height: 4em;
transform: translate(0.5em,-50%);
}
.lever:checked:after {
animation: leverBOn var(--dur) linear forwards;
}
.lever:checked + label {
background-color: #0d0;
box-shadow: 0 0 0.75em #0f0, 0 0.5em 0.75em rgba(0,0,0,0.3);
}
.lever:checked + label + label {
background-color: #500;
box-shadow: 0 0.5em 0.75em rgba(0,0,0,0.3);
}
/* To stop animations from running on load */
.pristine:before, .pristine:after {
animation: none;
}
@keyframes leverAOn {
from {
box-shadow:
-2em 4em 2em rgba(0,0,0,0.3),
-2em 5em 4em rgba(0,0,0,0.2),
-2em 7em 4em rgba(0,0,0,0.2),
-2em 9em 4em rgba(0,0,0,0.2),
-2em 11em 4em rgba(0,0,0,0.2);
transform: translate(100%,-50%);
}
50% {
box-shadow:
0 6em 2em rgba(0,0,0,0.3),
0 5em 4em rgba(0,0,0,0.2),
0 7em 4em rgba(0,0,0,0.2),
0 9em 4em rgba(0,0,0,0.2),
0 11em 4em rgba(0,0,0,0.2);
}
to {
box-shadow:
2em 4em 2em rgba(0,0,0,0.3),
2em 5em 4em rgba(0,0,0,0.2),
2em 7em 4em rgba(0,0,0,0.2),
2em 9em 4em rgba(0,0,0,0.2),
2em 11em 4em rgba(0,0,0,0.2);
transform: translate(-200%,-50%);
}
}
@keyframes leverAOff {
from {
box-shadow:
2em 4em 2em rgba(0,0,0,0.3),
2em 5em 4em rgba(0,0,0,0.2),
2em 7em 4em rgba(0,0,0,0.2),
2em 9em 4em rgba(0,0,0,0.2),
2em 11em 4em rgba(0,0,0,0.2);
transform: translate(-200%,-50%);
}
50% {
box-shadow:
0 6em 2em rgba(0,0,0,0.3),
0 5em 4em rgba(0,0,0,0.2),
0 7em 4em rgba(0,0,0,0.2),
0 9em 4em rgba(0,0,0,0.2),
0 11em 4em rgba(0,0,0,0.2);
}
to {
box-shadow:
-2em 4em 2em rgba(0,0,0,0.3),
-2em 5em 4em rgba(0,0,0,0.2),
-2em 7em 4em rgba(0,0,0,0.2),
-2em 9em 4em rgba(0,0,0,0.2),
-2em 11em 4em rgba(0,0,0,0.2);
transform: translate(100%,-50%);
}
}
@keyframes leverBOn {
from { width: 7.5em; transform: translate(0.5em,-50%); }
50% { width: 4em; transform: translate(-50%,-50%); }
to { width: 7.5em; transform: translate(-8em,-50%); }
}
@keyframes leverBOff {
from { width: 7.5em; transform: translate(-8em,-50%); }
50% { width: 4em; transform: translate(-50%,-50%); }
to { width: 7.5em; transform: translate(0.5em,-50%); }
}
</style>
