效果演示
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会滑行的小球</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<style>
:root{--clr-0:#CCCCCC;--clr-1:#f5f5f5;--clr-2:#232323}body{font-family:'Montserrat',sans-serif;font-size:1rem;background-color:var(--clr-0)}body.light .cover{background-color:var(--clr-0)}#stick-figure-svg{opacity:0;visibility:hidden}body.light .theme-toggle-button{border-color:white;background-color:var(--clr-0)}body.dark .cover{background-color:var(--clr-2)}body.dark .theme-toggle-button{border-color:#b8b1a7;background-color:var(--clr-2)}body.dark #R-leg,body.dark #L-leg{stroke:white}body.light #R-leg,body.light #L-leg{stroke:#232323}.cover{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:75px;height:75px;background-color:black;z-index:-1}.container{display:flex;justify-content:center;align-items:center;height:100vh;flex-direction:column;gap:2rem;position:relative;overflow:hidden}button{padding:2rem;cursor:pointer}.theme-toggle-button{width:15rem;height:5rem;border:4px solid white;border-radius:50px;display:flex;align-items:flex-end;padding:0;background-color:var(--clr-0)}#stick-figure-svg{width:147%;height:147%}.template-footer{position:fixed;bottom:0;right:0;height:2rem;width:15rem;border-radius:5px 0 0 0;background-color:#ffffba;display:flex;justify-content:space-between;align-items:center;padding:0.8rem 1.6rem}
</style>
</head>
<body>
<div class="container">
<div class="cover"></div>
<button type="submit" class="theme-toggle-button">
<svg width="100%" id="stick-figure-svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 200">
<defs>
<linearGradient id="linear-gradient" x1="27.6" y1="49.33" x2="125.11" y2="135.42"
gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f0b402" />
<stop offset=".26" stop-color="#f1a508" />
<stop offset=".69" stop-color="#f39210" />
<stop offset=".99" stop-color="#f48c13" />
</linearGradient>
<mask id="faceClip">
<circle id="face-clip" cx="58" cy="142" r="57"></circle>
</mask>
</defs>
<g id="stick-figure">
<g id="R-leg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="4">
<line id="R-thigh" x1="70" y1="168" x2="70" y2="138" />
<line id="R-calf" x1="70" y1="168" x2="70" y2="198" />
<line id="R-foot" x1="70" y1="198" x2="82" y2="198" />
</g>
<g id="L-leg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="4">
<line id="L-thigh" x1="46" y1="168" x2="46" y2="138" />
<line id="L-calf" x1="46" y1="168" x2="46" y2="198" />
<line id="L-foot" x1="46" y1="198" x2="34" y2="198" />
</g>
<!-- <circle id="face" cx="75" cy="91.18" r="60" fill="url(#linear-gradient)" /> -->
<circle id="face" cx="58" cy="132" r="68" fill="url(#linear-gradient)"></circle>
<g id="eyes-mouth">
<circle id="L-eye" cx="57.68" cy="83.18" r="3.5" />
<circle id="R-eye" cx="90.68" cy="83.18" r="3.5" />
<path id="mouth"
d="M79.53,91.98c.15,0,.25,.22,.22,.45-.27,2-2.29,3.55-4.74,3.55s-4.48-1.55-4.74-3.55c-.03-.23,.07-.45,.22-.45h9.05Z"
fill="#fff" transform-origin="center" transform="scale(1.3)" />
</g>
<g id="highlights" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2">
<path id="hl-1" d="M76.06,145.54l-13.33-13.33" />
<path id="hl-2" d="M92.73,132.21l-13.33,13.33" />
<path id="hl-3" d="M63.63,161.31l13.33-13.33" />
<path id="hl-4" d="M92.73,161.31l-13.33-13.33" />
</g>
</g>
</svg>
</button>
</div>
</body>
<script>
gsap.set("#stick-figure-svg", { autoAlpha: 1 });
gsap.set("#stick-figure", { x: -135 });
gsap.set("#eyes-mouth", { transformOrigin: "50% 50%" })
gsap.set("#L-foot", { attr: { x1: 46, x2: 58 } });
gsap.set("#highlights", { autoAlpha: 0 })
gsap.set(["#R-foot", "#L-foot", "#R-thigh", "#R-calf", "#L-thigh", "#L-calf"], { autoAlpha: 0 })
gsap.set(".cover", { xPercent: -50, yPercent: -50 })
let readyForDrag = gsap.timeline({ defaults: { ease: "power1.in", duration: 0.2 } });
readyForDrag
.to(
"#eyes-mouth",
{ x: "+=20" },
"<"
)
.to(["#R-calf"], { attr: { x2: 95, y2: 198 } })
.to(["#R-foot"], { attr: { x2: 95, x1: 107 } }, "<")
.to(["#R-foot"], { attr: { y2: 198, y1: 190 } })
.to(["#L-calf"], { attr: { x2: 71, y2: 198 } })
.to(["#L-foot"], { attr: { x1: 74, x2: 86 } }, "<")
.to(["#L-foot"], { attr: { y2: 190 } })
let highlight_tl = gsap.timeline({ paused: true, defaults: { ease: "power4.in", duration: 0.2 } })
highlight_tl
.to("#highlights", { autoAlpha: 1, duration: 0.1 })
.to("#hl-1", { drawSVG: "0% 100%" })
.to(["#hl-2", "#hl-3", "#hl-4"], { drawSVG: "100% 0%" }, "<")
.to("#hl-1", { drawSVG: "50% 100%", autoAlpha: 0 }, "<")
.to(["#hl-2", "#hl-3", "#hl-4"], { drawSVG: "50% 0%", autoAlpha: 0 }, "<")
let wakeup_tl = gsap.timeline({ paused: true, defaults: { ease: "power1.in", duration: 0.4 } });
wakeup_tl
.to(["#R-foot", "#L-foot", "#R-thigh", "#R-calf", "#L-thigh", "#L-calf"], { autoAlpha: 1, duration: 0.1 })
.to("#face", { attr: { cy: 90 }, duration: 0.2 })
.fromTo(
["#R-thigh", "#R-calf"],
{ attr: { x1: 85, y1: 198 } },
{ attr: { x1: 85, y1: 173 }, duration: 0.2 },
"<"
)
.fromTo(
["#L-thigh", "#L-calf"],
{ attr: { x1: 61, y1: 198 } },
{ attr: { x1: 61, y1: 173 }, duration: 0.2 },
"<"
)
.from(
"#eyes-mouth",
{ x: 25, y: 40, autoAlpha: 0 },
"<"
)
.from(["#L-eye", "#R-eye"], {
transformOrigin: "50% 50%",
scaleY: 0,
})
.fromTo(["#L-eye", "#R-eye"], { scaleY: 0 }, { scaleY: 1, duration: 0.1, transformOrigin: "50% 50%" })
.add(readyForDrag.play())
.to("#stick-figure", { x: 142.5, duration: 0.8 })
.to(["#R-foot", "#L-foot"], { attr: { y1: 198, y2: 198 }, duration: 0.1 })
.to(["#L-foot"], { attr: { x1: 71, x2: 59 }, duration: 0.2 }, "<")
.to(["#L-calf", "#L-thigh"], { attr: { x1: 71, x2: 71 }, duration: 0.1 }, "<")
.to(["#R-calf", "#R-thigh"], { attr: { x1: 95, x2: 95 }, duration: 0.1 }, "<")
.to("#face", { attr: { cx: 83, cy: 75 }, ease: "back" }, "<")
.to("#eyes-mouth", { x: "-=9", y: "-=5" }, "<")
.addLabel("goingtosleep")
.to(["#L-calf", "#L-thigh"], { attr: { x1: 61, x2: 71 } })
.to(["#R-calf", "#R-thigh"], { attr: { x1: 105, x2: 95 } }, "<")
.to("#eyes-mouth", { y: "+=60", transformOrigin: "50% 50%", autoAlpha: 0 })
.to("#face", { attr: { cx: 83, cy: 132 } }, "-=0.2");
wakeup_tl.timeScale(1.5)
let playButton = document.querySelector(".theme-toggle-button");
let themeDark = false
let cover = document.querySelector(".cover");
function turnOnDarkModeHandler() {
document.body.classList.add("dark");
document.body.classList.remove("light");
gsap.to(".cover", { width: "100vw", height: "100vh", duration: 1 }).then(() => document.body.style.backgroundColor = "#232323")
}
function turnOnLightModeHandler() {
document.body.classList.add("light");
document.body.classList.remove("dark");
gsap.to(".cover", { width: "100vw", height: "100vh", duration: 1 }).then(() => document.body.style.backgroundColor = "#CCCCCC")
}
playButton.addEventListener("click", () => {
gsap.set(".cover", { width: "75px", height: "75px" })
themeDark = !themeDark
if (themeDark) {
wakeup_tl.play().eventCallback("onComplete", turnOnDarkModeHandler)
highlight_tl.play()
} else {
wakeup_tl.reverse().then(turnOnLightModeHandler)
highlight_tl.restart()
}
});
</script>
</html>