mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
92 lines
2.2 KiB
HTML
92 lines
2.2 KiB
HTML
<label class="switch">
|
|
<input type="checkbox" class="input__check">
|
|
<span class="slider"></span>
|
|
</label>
|
|
<style>
|
|
/* From Uiverse.io by EddyBel - Tags: switch */
|
|
/* The switch - the box around the slider */
|
|
.switch {
|
|
font-size: 17px;
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 3.5em;
|
|
height: 2em;
|
|
transform-style: preserve-3d;
|
|
perspective: 500px;
|
|
animation: toggle__animation 3s infinite;
|
|
}
|
|
|
|
.switch::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
filter: blur(20px);
|
|
z-index: -1;
|
|
border-radius: 50px;
|
|
background-color: #d8ff99;
|
|
background-image: radial-gradient(at 21% 46%, hsla(183,65%,60%,1) 0px, transparent 50%),
|
|
radial-gradient(at 23% 25%, hsla(359,74%,70%,1) 0px, transparent 50%),
|
|
radial-gradient(at 20% 1%, hsla(267,83%,75%,1) 0px, transparent 50%),
|
|
radial-gradient(at 86% 87%, hsla(204,69%,68%,1) 0px, transparent 50%),
|
|
radial-gradient(at 99% 41%, hsla(171,72%,77%,1) 0px, transparent 50%),
|
|
radial-gradient(at 55% 24%, hsla(138,60%,62%,1) 0px, transparent 50%);
|
|
}
|
|
|
|
/* Hide default HTML checkbox */
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
/* The slider */
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #fdfefedc;
|
|
transition: .4s;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 1.4em;
|
|
width: 1.4em;
|
|
left: 0.3em;
|
|
bottom: 0.35em;
|
|
transition: .4s;
|
|
border-radius: 50%;
|
|
box-shadow: rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,
|
|
rgba(0, 0, 0, 0.09) 0px -1px 15px -8px;
|
|
background-color: #ff99fd;
|
|
background-image: radial-gradient(at 81% 39%, hsla(327,79%,79%,1) 0px, transparent 50%),
|
|
radial-gradient(at 11% 72%, hsla(264,64%,79%,1) 0px, transparent 50%),
|
|
radial-gradient(at 23% 20%, hsla(75,98%,71%,1) 0px, transparent 50%);
|
|
}
|
|
|
|
.input__check:checked + .slider {
|
|
background-color: #17202A;
|
|
}
|
|
|
|
.input__check:checked + .slider:before {
|
|
transform: translateX(1.5em);
|
|
}
|
|
|
|
@keyframes toggle__animation {
|
|
0%, 100% {
|
|
transform: translateY(-10px) rotateX(15deg) rotateY(-20deg);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(0px) rotateX(15deg) rotateY(-20deg);
|
|
}
|
|
}
|
|
</style>
|