<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>篮球switch</title>
<style>
body {
background: #2e394d;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
*:before,
*:after {
content: '';
position: absolute;
}
input {
height: 40px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 40px;
}
.toggle-wrapper {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
@media (max-width: 960px) {
.toggle-wrapper {
flex: 1 1 calc(100% / 2);
}
}
@media (max-width: 700px) {
.toggle-wrapper {
flex: 1 1 100%;
}
}
.toggle-wrapper {
background: #de8787;
}
.toggle-wrapper .toggle {
transform: translate(-40px, 40px);
}
.toggle {
position: relative;
display: inline-block;
}
label.toggle-item {
width: 7em;
background: #2e394d;
height: 3em;
display: inline-block;
border-radius: 50px;
margin: 40px;
position: relative;
transition: all 0.3s ease;
transform-origin: 20% center;
cursor: pointer;
}
label.toggle-item:before {
display: block;
transition: all 0.2s ease;
width: 2.3em;
height: 2.3em;
top: 0.25em;
left: 0.25em;
border-radius: 2em;
border: 2px solid #88cf8f;
transition: 0.3s ease;
}
.basketball-hoop label {
background: #fdb827;
}
.basketball-hoop label:before {
content: none;
}
.basketball-hoop .ball {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
position: absolute;
background: #ff9800;
border: 2px solid black;
transition: 0.4s ease;
top: 4px;
left: 4px;
background-image: radial-gradient(
circle at -5px 10px,
transparent 15px,
black 15px,
black 17px,
transparent 17px
), radial-gradient(
circle at 41px 25px,
transparent 15px,
black 15px,
black 17px,
transparent 17px
), linear-gradient(
110deg,
transparent 22px,
black 22px,
black 24px,
transparent 24px
), linear-gradient(18deg, transparent 22px, black 22px, black 24px, transparent
24px);
}
.basketball-hoop .ball__wrapper {
transition: 0.4s ease;
width: 195%;
height: 200%;
transform-origin: 50% -2%;
}
.basketball-hoop .hoop {
top: -50px;
right: -84px;
width: 50px;
background: #f44336;
height: 8px;
position: absolute;
}
.basketball-hoop .hoop:before {
position: absolute;
right: -4px;
width: 7px;
height: 60px;
background: #cd2e22;
top: -40px;
}
.basketball-hoop .hoop:after {
width: 40px;
height: 35px;
background: repeating-linear-gradient(
45deg,
transparent,
transparent 13px,
white 13px,
white 15px
), repeating-linear-gradient(-45deg, transparent, transparent 13px, white
13px, white 15px);
top: 8px;
border-radius: 0 0 20% 20%/40% 40% 60% 60%;
border: 2px solid #fff;
border-width: 0 2px;
left: 2px;
z-index: 20;
}
#hoop:checked + label {
background: #542583;
transition-delay: 1.35s;
}
#hoop:checked + label .ball__wrapper {
animation: 1.5s linear ball-wrapper forwards;
}
#hoop:checked + label .ball {
animation: 1.5s linear ball forwards;
}
@keyframes ball {
0% {
transform: none;
}
40% {
transform: rotate(-150deg);
}
48% {
transform: rotate(-150deg) translateY(92px);
}
52% {
transform: rotate(-150deg) translate(-10px, 80px);
}
56% {
transform: rotate(-150deg) translate(-25px, 91px);
}
60% {
transform: rotate(-150deg) translate(-35px, 86px);
}
65% {
transform: rotate(-150deg) translate(-45px, 91px);
}
70% {
transform: rotate(-150deg) translate(-50px, 87px);
}
75% {
transform: rotate(-150deg) translate(-60px, 91px);
}
80% {
transform: rotate(-150deg) translate(-65px, 88px);
}
85% {
transform: rotate(-150deg) translate(-70px, 91px);
}
90% {
transform: rotate(-150deg) translate(-75px, 90px);
}
95% {
transform: rotate(-150deg) translate(-80px, 90px);
}
100% {
transform: rotate(-150deg) translate(-82px, 91px);
}
}
@keyframes ball-wrapper {
0% {
transform: none;
}
40%,
100% {
transform: rotate(150deg);
}
}
</style>
</head>
<body>
<div class="toggle-wrapper">
<div class="toggle basketball-hoop">
<input id="hoop" type="checkbox" />
<label class="toggle-item" for="hoop">
<div class="ball__wrapper">
<div class="ball"></div>
</div>
<div class="hoop"></div>
</label>
</div>
</div>
</body>
</html>