پیشنمایش زنده
کد HTML
<div class="toggle-container">
<input type="checkbox" id="theme-toggle" class="toggle-input" />
<div class="scene">
<label for="theme-toggle" class="toggle">
<div class="socket">
<div class="socket-shadow"></div>
</div>
<div class="face">
<div class="face-shadow"></div>
<div class="face-glowdrop"></div>
<div class="face-plate"></div>
<div class="face-shine">
<div class="face-shine-shadow"></div>
</div>
<div class="face-glows"><div></div></div>
<svg
class="svg-glow"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="glow-path"
d="M9.8815 1.36438L9.88141 1.36429C9.70639 1.18942 9.48342 1.07041 9.24073 1.02235C8.99803 0.974286 8.74653 0.999323 8.51808 1.09429L8.51753 1.09452C4.54484 2.75146 1.75 6.6732 1.75 11.25C1.75 17.3262 6.67489 22.25 12.75 22.25C14.9217 22.2501 17.0448 21.6075 18.852 20.4032C20.6591 19.1989 22.0695 17.4868 22.9055 15.4825L22.9058 15.4818C23.0007 15.2532 23.0256 15.0015 22.9774 14.7587C22.9291 14.5159 22.8099 14.2929 22.6348 14.118C22.4597 13.9431 22.2366 13.8241 21.9937 13.7761C21.7509 13.7281 21.4993 13.7533 21.2708 13.8484L21.2707 13.8485C20.2346 14.2801 19.1231 14.5016 18.0007 14.5H18C15.7457 14.5 13.5837 13.6045 11.9896 12.0104C10.3955 10.4163 9.5 8.25433 9.5 5.99999L9.5 5.99927C9.49838 4.8769 9.71983 3.76541 10.1515 2.72938C10.2468 2.50072 10.2721 2.24888 10.224 2.00584C10.1759 1.76281 10.0567 1.53954 9.8815 1.36438Z"
stroke-width="0"
></path>
</svg>
<svg
class="trail-holder"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="trail"
d="M9.8815 1.36438L9.88141 1.36429C9.70639 1.18942 9.48342 1.07041 9.24073 1.02235C8.99803 0.974286 8.74653 0.999323 8.51808 1.09429L8.51753 1.09452C4.54484 2.75146 1.75 6.6732 1.75 11.25C1.75 17.3262 6.67489 22.25 12.75 22.25C14.9217 22.2501 17.0448 21.6075 18.852 20.4032C20.6591 19.1989 22.0695 17.4868 22.9055 15.4825L22.9058 15.4818C23.0007 15.2532 23.0256 15.0015 22.9774 14.7587C22.9291 14.5159 22.8099 14.2929 22.6348 14.118C22.4597 13.9431 22.2366 13.8241 21.9937 13.7761C21.7509 13.7281 21.4993 13.7533 21.2708 13.8484L21.2707 13.8485C20.2346 14.2801 19.1231 14.5016 18.0007 14.5H18C15.7457 14.5 13.5837 13.6045 11.9896 12.0104C10.3955 10.4163 9.5 8.25433 9.5 5.99999L9.5 5.99927C9.49838 4.8769 9.71983 3.76541 10.1515 2.72938C10.2468 2.50072 10.2721 2.24888 10.224 2.00584C10.1759 1.76281 10.0567 1.53954 9.8815 1.36438Z"
stroke="#2CC6FE"
stroke-linecap="round"
stroke-dasharray="7 80"
stroke-dashoffset="40"
></path>
</svg>
<svg
class="main-svg"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter
id="inner-shadow"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
></feBlend>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
></feColorMatrix>
<feOffset dx="0.4" dy="0.5"></feOffset>
<feGaussianBlur stdDeviation="0.1"></feGaussianBlur>
<feComposite
in2="hardAlpha"
operator="arithmetic"
k2="-1"
k3="1"
></feComposite>
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
></feColorMatrix>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_731_4"
></feBlend>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
></feColorMatrix>
<feOffset dx="0.3" dy="-0.5"></feOffset>
<feGaussianBlur stdDeviation="0.1"></feGaussianBlur>
<feComposite
in2="hardAlpha"
operator="arithmetic"
k2="-1"
k3="1"
></feComposite>
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
></feColorMatrix>
<feBlend
mode="normal"
in2="effect1_innerShadow_731_4"
result="effect2_innerShadow_731_4"
></feBlend>
</filter>
<linearGradient
id="fade-gradient"
x1="0%"
y1="0%"
x2="100%"
y2="0%"
gradientTransform="rotate(45)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.45" stop-color="white" stop-opacity="0"></stop>
<stop offset="0.75" stop-color="white" stop-opacity="0.75"></stop>
<stop offset="0.95" stop-color="white" stop-opacity="0.5"></stop>
<stop offset="1" stop-color="white" stop-opacity="0.35"></stop>
</linearGradient>
<linearGradient
id="inner-fade-gradient"
x1="0%"
y1="0%"
x2="100%"
y2="0%"
gradientTransform="rotate(45)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="transparent" stop-opacity="0"></stop>
<stop offset="0.75" stop-color="white" stop-opacity="1"></stop>
</linearGradient>
<mask id="fade">
<rect
width="100%"
height="100%"
fill="url(#fade-gradient)"
></rect>
</mask>
<mask id="inner-fade">
<rect
width="100%"
height="100%"
fill="url(#inner-fade-gradient)"
></rect>
</mask>
<filter
id="outer-shadow"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
></feColorMatrix>
<feOffset dy="0.5" dx="-0.05"></feOffset>
<feGaussianBlur stdDeviation="0.25"></feGaussianBlur>
<feComposite in2="hardAlpha" operator="out"></feComposite>
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
></feColorMatrix>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_731_4"
></feBlend>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_731_4"
result="shape"
></feBlend>
</filter>
</defs>
<g>
<path
class="outline"
d="M9.8815 1.36438L9.88141 1.36429C9.70639 1.18942 9.48342 1.07041 9.24073 1.02235C8.99803 0.974286 8.74653 0.999323 8.51808 1.09429L8.51753 1.09452C4.54484 2.75146 1.75 6.6732 1.75 11.25C1.75 17.3262 6.67489 22.25 12.75 22.25C14.9217 22.2501 17.0448 21.6075 18.852 20.4032C20.6591 19.1989 22.0695 17.4868 22.9055 15.4825L22.9058 15.4818C23.0007 15.2532 23.0256 15.0015 22.9774 14.7587C22.9291 14.5159 22.8099 14.2929 22.6348 14.118C22.4597 13.9431 22.2366 13.8241 21.9937 13.7761C21.7509 13.7281 21.4993 13.7533 21.2708 13.8484L21.2707 13.8485C20.2346 14.2801 19.1231 14.5016 18.0007 14.5H18C15.7457 14.5 13.5837 13.6045 11.9896 12.0104C10.3955 10.4163 9.5 8.25433 9.5 5.99999L9.5 5.99927C9.49838 4.8769 9.71983 3.76541 10.1515 2.72938C10.2468 2.50072 10.2721 2.24888 10.224 2.00584C10.1759 1.76281 10.0567 1.53954 9.8815 1.36438Z"
fill="black"
stroke="black"
stroke-width="2"
></path>
<path
mask="url(#fade)"
filter="url(#outer-shadow)"
d="M9.8815 1.36438L9.88141 1.36429C9.70639 1.18942 9.48342 1.07041 9.24073 1.02235C8.99803 0.974286 8.74653 0.999323 8.51808 1.09429L8.51753 1.09452C4.54484 2.75146 1.75 6.6732 1.75 11.25C1.75 17.3262 6.67489 22.25 12.75 22.25C14.9217 22.2501 17.0448 21.6075 18.852 20.4032C20.6591 19.1989 22.0695 17.4868 22.9055 15.4825L22.9058 15.4818C23.0007 15.2532 23.0256 15.0015 22.9774 14.7587C22.9291 14.5159 22.8099 14.2929 22.6348 14.118C22.4597 13.9431 22.2366 13.8241 21.9937 13.7761C21.7509 13.7281 21.4993 13.7533 21.2708 13.8484L21.2707 13.8485C20.2346 14.2801 19.1231 14.5016 18.0007 14.5H18C15.7457 14.5 13.5837 13.6045 11.9896 12.0104C10.3955 10.4163 9.5 8.25433 9.5 5.99999L9.5 5.99927C9.49838 4.8769 9.71983 3.76541 10.1515 2.72938C10.2468 2.50072 10.2721 2.24888 10.224 2.00584C10.1759 1.76281 10.0567 1.53954 9.8815 1.36438Z"
fill="black"
stroke="black"
stroke-width="2"
></path>
</g>
<g class="inner">
<path
class="inner-face"
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.528 1.71799C9.63312 1.82308 9.70465 1.95704 9.73349 2.10286C9.76234 2.24868 9.7472 2.39979 9.69 2.53699C9.23282 3.6342 8.99828 4.81134 9 5.99999C9 8.38694 9.94821 10.6761 11.636 12.3639C13.3239 14.0518 15.6131 15 18 15C19.1886 15.0017 20.3658 14.7672 21.463 14.31C21.6001 14.2529 21.7511 14.2378 21.8968 14.2666C22.0425 14.2954 22.1763 14.3668 22.2814 14.4717C22.3865 14.5767 22.458 14.7105 22.487 14.8562C22.5159 15.0018 22.501 15.1528 22.444 15.29C21.646 17.2032 20.2997 18.8376 18.5747 19.9871C16.8496 21.1367 14.823 21.7501 12.75 21.75C6.951 21.75 2.25 17.05 2.25 11.25C2.25 6.88199 4.917 3.13799 8.71 1.55599C8.84707 1.49901 8.99797 1.48399 9.14359 1.51282C9.28921 1.54166 9.42299 1.61307 9.528 1.71799Z"
></path>
<path
mask="url(#inner-fade)"
class="inner-bg"
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.528 1.71799C9.63312 1.82308 9.70465 1.95704 9.73349 2.10286C9.76234 2.24868 9.7472 2.39979 9.69 2.53699C9.23282 3.6342 8.99828 4.81134 9 5.99999C9 8.38694 9.94821 10.6761 11.636 12.3639C13.3239 14.0518 15.6131 15 18 15C19.1886 15.0017 20.3658 14.7672 21.463 14.31C21.6001 14.2529 21.7511 14.2378 21.8968 14.2666C22.0425 14.2954 22.1763 14.3668 22.2814 14.4717C22.3865 14.5767 22.458 14.7105 22.487 14.8562C22.5159 15.0018 22.501 15.1528 22.444 15.29C21.646 17.2032 20.2997 18.8376 18.5747 19.9871C16.8496 21.1367 14.823 21.7501 12.75 21.75C6.951 21.75 2.25 17.05 2.25 11.25C2.25 6.88199 4.917 3.13799 8.71 1.55599C8.84707 1.49901 8.99797 1.48399 9.14359 1.51282C9.28921 1.54166 9.42299 1.61307 9.528 1.71799Z"
></path>
<g filter="url(#inner-shadow)" mask="url(#fade)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.528 1.71799C9.63312 1.82308 9.70465 1.95704 9.73349 2.10286C9.76234 2.24868 9.7472 2.39979 9.69 2.53699C9.23282 3.6342 8.99828 4.81134 9 5.99999C9 8.38694 9.94821 10.6761 11.636 12.3639C13.3239 14.0518 15.6131 15 18 15C19.1886 15.0017 20.3658 14.7672 21.463 14.31C21.6001 14.2529 21.7511 14.2378 21.8968 14.2666C22.0425 14.2954 22.1763 14.3668 22.2814 14.4717C22.3865 14.5767 22.458 14.7105 22.487 14.8562C22.5159 15.0018 22.501 15.1528 22.444 15.29C21.646 17.2032 20.2997 18.8376 18.5747 19.9871C16.8496 21.1367 14.823 21.7501 12.75 21.75C6.951 21.75 2.25 17.05 2.25 11.25C2.25 6.88199 4.917 3.13799 8.71 1.55599C8.84707 1.49901 8.99797 1.48399 9.14359 1.51282C9.28921 1.54166 9.42299 1.61307 9.528 1.71799Z"
fill="hsl(0 0% 10% / .01)"
></path>
</g>
</g>
</svg>
</div>
</label>
</div>
</div>
کد CSS
.toggle-container {
--step: 0.5s;
--ease: linear(
0 0%,
0.2342 12.49%,
0.4374 24.99%,
0.6093 37.49%,
0.6835 43.74%,
0.7499 49.99%,
0.8086 56.25%,
0.8593 62.5%,
0.9023 68.75%,
0.9375 75%,
0.9648 81.25%,
0.9844 87.5%,
0.9961 93.75%,
1 100%
);
--offset: calc(var(--step) * 0.5);
--bg-light: hsl(235 5% 85%);
--bg-dark: #0b0e13;
--button-light: hsl(223 4% 73%);
--button-dark: hsl(220 27% 6%);
--glow: hsl(182 90% 92%);
width: 100%;
height: 100%;
}
.scene {
height: 100%;
width: 100%;
display: grid;
place-items: center;
background: var(--bg-dark);
border-radius: 0px;
position: relative;
overflow: hidden;
transition: background var(--step) var(--ease);
}
.scene::before {
--size: 45px;
--line: hsl(0 0% 100% / 0.07);
content: "";
height: 100%;
width: 100%;
position: absolute;
background:
linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 50% 50% /
var(--size) var(--size),
linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
var(--size) var(--size);
mask: linear-gradient(-20deg, transparent 50%, white);
pointer-events: none;
transition: opacity var(--step) var(--ease);
}
.toggle-input {
display: none;
}
.toggle-input:checked ~ .scene {
background: var(--bg-light);
}
.toggle-input:checked ~ .scene::before {
--line: hsl(0 0% 10% / 0.1);
}
.toggle {
font-size: 64px;
height: 2.3em;
padding: 0;
border-radius: 2.5em;
border: 0;
aspect-ratio: 1.8 / 1;
position: relative;
cursor: pointer;
background: transparent;
display: block;
}
.socket {
position: absolute;
inset: 0;
border-radius: 3em;
background: hsl(0 0% 0%);
box-shadow: -0.05em 0.1em 0.2em -0.2em white;
transition:
background var(--step) var(--ease),
box-shadow var(--step) var(--ease);
}
.socket-shadow {
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0em 0.075em 0.1em 0em white;
opacity: 0;
transition: opacity var(--step) var(--ease);
}
.face {
position: absolute;
inset: 0.15em;
border-radius: 3em;
scale: 1;
transition: scale var(--step) var(--ease);
}
.face-plate {
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: -0.05em 0.1em 0.2em -0.2em white inset;
background: conic-gradient(from 45deg, #0000, hsl(0 0% 100% / 0.05)),
var(--button-dark);
transition: background var(--step) var(--ease);
}
.face-shadow,
.face-shadow::after,
.face-shadow::before {
position: absolute;
inset: 0;
border-radius: inherit;
}
.face-shadow::after,
.face-shadow::before {
content: "";
}
.face-shadow::before {
background: black;
}
.face-shadow::after {
background: white;
scale: 0.5;
transition:
opacity var(--step) var(--ease),
translate var(--step) var(--ease),
filter var(--step) var(--ease),
scale var(--step) var(--ease);
}
.face-glowdrop {
position: absolute;
inset: 0;
border-radius: inherit;
scale: 0;
transition: scale var(--step) var(--ease);
}
.face-glowdrop::after,
.face-glowdrop::before {
content: "";
height: 50%;
aspect-ratio: 1;
background: #fff;
filter: blur(6px);
position: absolute;
z-index: -1;
border-radius: 50%;
}
.face-glowdrop::before {
left: 4%;
width: 56%;
translate: 0 -25%;
}
.face-glowdrop::after {
bottom: 0;
right: 12%;
width: 34%;
translate: 0 20%;
}
.face-glows {
position: absolute;
inset: -0.075em;
opacity: 0;
border-radius: inherit;
mix-blend-mode: plus-lighter;
filter: blur(8px);
z-index: 20;
mask: conic-gradient(from 280deg, #0000, #fff 20deg 45deg, #0000 95deg),
conic-gradient(from 110deg, #0000, #fff 20deg, #0000 95deg);
transition: opacity var(--step) var(--ease);
}
.face-glows div {
position: absolute;
inset: 0;
border-radius: inherit;
filter: blur(4px);
border: 0.1em solid white;
}
.face-shine {
position: absolute;
inset: 0;
opacity: 0;
border-radius: 3em;
transition: opacity var(--step) var(--ease);
}
.face-shine-shadow {
position: absolute;
inset: 0;
border-radius: inherit;
mask: conic-gradient(
from 0deg,
#fff 90deg,
#0000 110deg 200deg,
#fff 215deg 280deg,
#0000 315deg
);
box-shadow:
0.075em 0 0.025em -0.025em hsl(0 0% 0% / 0.5) inset,
-0.075em -0.05em 0.025em -0.025em hsl(0 0% 0% / 0.5) inset;
}
.face-shine::before {
content: "";
position: absolute;
inset: 0.05em;
border-radius: 3em;
box-shadow:
0 -0.05em 0.025em -0.025em hsl(0 0% 50% / 0.5) inset,
-0.025em 0.05em 0.025em -0.025em hsl(0 0% 100% / 0.5) inset;
}
.face-shine::after {
content: "";
position: absolute;
inset: 0;
background: conic-gradient(from 45deg, #0000, hsl(0 0% 100% / 0.25));
border-radius: 3em;
}
.face svg {
width: 25%;
position: absolute;
top: 50%;
left: 50%;
translate: -52% -48%;
overflow: visible;
}
.face svg path {
transform-box: fill-box;
transform-origin: center center;
}
.svg-glow {
z-index: 3;
filter: drop-shadow(0 0 0.2em var(--glow));
opacity: 1;
transition: opacity var(--step) var(--ease);
}
.trail-holder {
z-index: 2;
filter: blur(10px);
}
.trail-holder .trail {
stroke-width: 4;
}
.trail {
stroke-dasharray: 10 80;
stroke-dashoffset: 10;
opacity: 0;
transition:
stroke-dashoffset calc(var(--step) * 3) var(--ease),
opacity calc(var(--step) * 0.5) linear;
transition-delay: var(--offset), calc(var(--offset) + calc(var(--step) * 2.5));
}
.inner-face {
fill: hsl(230 5% 80%);
}
.glow-path {
fill: var(--glow);
stroke: var(--glow);
opacity: 1;
stroke-width: 0px;
}
.outline {
stroke: black;
transition: stroke var(--step) var(--ease);
}
.inner-bg {
fill: black;
transition: fill var(--step) var(--ease);
}
.toggle-input:checked ~ .scene .socket {
background: hsl(0 0% 90%);
box-shadow: -0.025em 0.08em 0.2em -0.1em white;
}
.toggle-input:checked ~ .scene .socket-shadow {
opacity: 1;
}
.toggle-input:checked ~ .scene .face {
scale: 1.12;
}
.toggle-input:checked ~ .scene .face-plate {
background: conic-gradient(from 45deg, #0000, hsl(0 0% 100% / 0.05)),
var(--button-light);
}
.toggle-input:checked ~ .scene .face-glowdrop {
scale: 1;
}
.toggle-input:checked ~ .scene .face-glows {
opacity: 1;
}
.toggle-input:checked ~ .scene .face-shine {
opacity: 1;
}
.toggle-input:checked ~ .scene .face-shadow::before {
translate: -15% 55%;
filter: blur(1em);
opacity: 0.35;
}
.toggle-input:checked ~ .scene .face-shadow::after {
filter: blur(0.5em);
scale: 1;
}
.toggle-input:checked ~ .scene .svg-glow {
opacity: 0;
transition-duration: var(--step);
transition-delay: 0s;
}
.toggle-input:checked ~ .scene .outline {
stroke: hsl(0 0% 30%);
}
.toggle-input:checked ~ .scene .inner-bg {
fill: hsl(0 0% 20%);
}
.toggle-input:checked ~ .scene .trail {
stroke-dashoffset: -70;
opacity: 1;
transition: stroke-dashoffset 0s;
}
.label-text {
position: absolute;
bottom: 1.2rem;
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: hsl(0 0% 50%);
font-family: system-ui, sans-serif;
transition: color var(--step) var(--ease);
user-select: none;
pointer-events: none;
}
.toggle-input:checked ~ .scene .label-text {
color: hsl(0 0% 40%);
}
.toggle:active .face {
scale: 0.99;
}
.toggle:active .socket {
box-shadow: -0.045em 0.1em 0.2em -0.15em white;
}