svg+gsap实现带音效昼夜切换动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+gsap实现带音效昼夜切换动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *:after, *:before { box-sizing: border-box; } :root { --size: calc(2 * 48px); --sun: #f7c96e; --sun-ray--even: #f6c155; --sun-ray--odd: #f9d286; --eye: #1a1a1a; --accent: #e84f30; --beak-left: #e6b319; --beak-right: #ebc247; --body: #fff; --hill-one: #73bf40; --hill-two: #4b9933; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: hsl(210, 0%, calc((5 + (var(--on, 0) * 80)) * 1%)); } body::before { --size: 60px; --line: color-mix(in lch, canvasText, transparent 90%); content: ''; height: 100vh; width: 100vw; position: fixed; 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); -webkit-mask: linear-gradient(-15deg, transparent 50%, white); mask: linear-gradient(-15deg, transparent 50%, white); top: 0; transform-style: flat; pointer-events: none; z-index: -1; } button { height: var(--size); width: var(--size); padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: none; cursor: pointer; border-radius: 50%; } button:focus-visible { outline: 2px solid canvasText; outline-offset: 2px; } span { display: none; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } :root:has([aria-pressed=true]) { color-scheme: light only; } :root:has([aria-pressed=false]) { color-scheme: dark only; } [aria-pressed="true"] span:nth-of-type(1) { display: none; } [aria-pressed="true"] span:nth-of-type(2) { display: inline-block; } [aria-pressed="false"] span:nth-of-type(1) { display: inline-block; } [aria-pressed="false"] span:nth-of-type(2) { display: none; } .cockerel__eye { fill: var(--eye); } .cockerel__body { fill: var(--body); } .cockerel__beak--left { fill: var(--beak-left); } .cockerel__beak--right { fill: var(--beak-right); } .cockerel__comb path, .cockerel__wattle { fill: var(--accent); } .hill:nth-of-type(1) { fill: var(--hill-one); } .hill:nth-of-type(2) { fill: var(--hill-two); } .sun { fill: var(--sun); } .sun__ray-holder:nth-of-type(even) { --fill: var(--sun-ray--even); } .sun__ray-holder:nth-of-type(odd) { --fill: var(--sun-ray--odd); } .sun__ray { fill: var(--fill); } .scene { height: 100%; width: 100%; overflow: visible !important; display: none; } .scene__backdrop { fill: hsl(207, 88%, calc((22 + (var(--on, 0) * 60)) * 1%)); } .scene__border { stroke: hsl(0, 0%, calc((80 - (var(--on, 0) * 20)) * 1%)); } .hill { fill: hsl(90, 80%, calc((var(--base-lightness, 30) + (var(--on, 0) * 30)) * 1%)); } .hill:nth-of-type(1) { --base-lightness: 10; } .hill:nth-of-type(2) { --base-lightness: 20; } label { height: 44px; width: 44px; position: fixed; bottom: 1rem; right: 1rem; cursor: pointer; } label > svg { position: absolute; height: 100%; width: 100%; top: 0; left: 0; } label path { fill: hsl(210, 40%, calc((80 - (var(--on, 0) * 60)) * 1%)); } label svg:nth-of-type(1) { display: none; } [type='checkbox'] { height: 0; width: 0; } :checked ~ label svg:nth-of-type(1) { display: block; } :checked ~ label svg:nth-of-type(2) { display: none; } </style> </head> <body translate="no"> <button aria-pressed="false"><span>Turn the lights on</span><span>Turn the lights off</span><svg class="scene" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg"> <!-- <g> --> <g clip-path="url(#backdrop-clip)"> <circle class="scene__backdrop" cx="300" cy="300" r="300" fill="#2E4241"/> <g class="scene__shooter-hold"> <path class="scene__shooter" fill-rule="evenodd" clip-rule="evenodd" d="M305.97 243.608L300 363l-5.97-119.392a6 6 0 1111.94 0z" fill="url(#shooting-star-paint)"/> </g> <g class="scene__moon"> <g class="moon"> <path class="moon__body" d="M456 300c0 86.156-69.844 156-156 156s-156-69.844-156-156 69.844-156 156-156c16.178 0 31.78 2.463 46.453 7.033C409.923 170.804 456 230.021 456 300z" fill="#C4C4C4"/> <circle class="moon__crater moon__crater--dark" cx="207.092" cy="318.026" r="16.412" transform="rotate(6.943 207.092 318.026)" fill="#888"/> <circle class="moon__crater moon__crater--dark" cx="319.866" cy="391.278" r="22.88" transform="rotate(-98.782 319.866 391.278)" fill="#888"/> <circle class="moon__crater moon__crater--dark" cx="375.378" cy="243.744" r="22.88" transform="rotate(-35.273 375.378 243.744)" fill="#888"/> <circle class="moon__crater moon__crater--dark" cx="382.321" cy="289.814" r="32.587" transform="rotate(25.737 382.321 289.814)" fill="#888"/> <path class="moon__crater moon__crater--light" fill-rule="evenodd" clip-rule="evenodd" d="M207.582 301.551c8.219 1.754 13.883 9.529 12.847 18.031-1.034 8.494-8.384 14.678-16.773 14.422-8.219-1.754-13.882-9.528-12.847-18.031 1.034-8.494 8.384-14.678 16.773-14.422z" fill="#AEAEAE"/> <path class="moon__crater moon__crater--light" fill-rule="evenodd" clip-rule="evenodd" d="M297.571 396.833c-.745-11.687 7.546-22.219 19.344-24.041 11.793-1.822 22.872 5.71 25.693 17.071.746 11.688-7.546 22.219-19.343 24.041-11.793 1.822-22.872-5.71-25.694-17.071z" fill="#AEAEAE"/> <path class="moon__crater moon__crater--light" fill-rule="evenodd" clip-rule="evenodd" d="M360.462 226.268c10.128-5.88 23.252-3.157 30.145 6.589 6.891 9.742 5.092 23.018-3.817 30.611-10.129 5.88-23.252 3.157-30.146-6.589-6.891-9.742-5.092-23.018 3.818-30.611z" fill="#AEAEAE"/> <path class="moon__crater moon__crater--light" fill-rule="evenodd" clip-rule="evenodd" d="M393.804 259.173c14.311 8.56 19.974 26.786 12.592 42.098-7.381 15.312-25.167 22.234-40.778 16.37-14.311-8.56-19.974-26.786-12.592-42.098 7.381-15.312 25.167-22.234 40.778-16.37z" fill="#AEAEAE"/> </g> </g> <!-- <circle cx="319.866" cy="391.278" r="22.88" transform="rotate(-98.782 319.866 391.278)" fill="#AEAEAE"/> --> <!-- <path fill-rule="evenodd" clip-rule="evenodd" d="M297.571 396.833c-.745-11.687 7.546-22.219 19.344-24.041 11.793-1.822 22.872 5.71 25.693 17.071.746 11.688-7.546 22.219-19.343 24.041-11.793 1.822-22.872-5.71-25.694-17.071z" fill="#AEAEAE"/> --> <!-- <circle cx="375.378" cy="243.744" r="22.88" transform="rotate(-35.273 375.378 243.744)" fill="#AEAEAE"/> --> <!-- <path fill-rule="evenodd" clip-rule="evenodd" d="M360.462 226.268c10.128-5.88 23.252-3.157 30.145 6.589 6.891 9.742 5.092 23.018-3.817 30.611-10.129 5.88-23.252 3.157-30.146-6.589-6.891-9.742-5.092-23.018 3.818-30.611z" fill="#AEAEAE"/> --> <!-- <circle cx="382.321" cy="289.814" r="32.587" transform="rotate(25.737 382.321 289.814)" fill="#AEAEAE"/> --> <!-- <path fill-rule="evenodd" clip-rule="evenodd" d="M393.804 259.173c14.311 8.56 19.974 26.786 12.592 42.098-7.381 15.312-25.167 22.234-40.778 16.37-14.311-8.56-19.974-26.786-12.592-42.098 7.381-15.312 25.167-22.234 40.778-16.37z" fill="#AEAEAE"/> --> <!-- <circle cx="207.092" cy="318.026" r="16.412" transform="rotate(6.943 207.092 318.026)" fill="#AEAEAE"/> --> <!-- <path fill-rule="evenodd" clip-rule="evenodd" d="M207.582 301.551c8.219 1.754 13.883 9.529 12.847 18.031-1.034 8.494-8.384 14.678-16.773 14.422-8.219-1.754-13.882-9.528-12.847-18.031 1.034-8.494 8.384-14.678 16.773-14.422z" fill="#AEAEAE"/> --> <g class="scene__stars"> <circle class="star" cx="132" cy="170" r="5" fill="#fff"/> <circle class="star" cx="189" cy="107" r="5" fill="#fff"/> <circle class="star" cx="512" cy="217" r="5" fill="#fff"/> <g class="star--twinkler"> <circle class="star" cx="403" cy="90" r="5" fill="#fff"/> </g> <g class="star--twinkler"> <circle class="star" cx="86" cy="317" r="5" fill="#fff"/> </g> </g> <g class="scene__sun"> <g class="sun"> <g class="sun__ray-holder"> <path class="sun__ray" d="M282 263h37.778l-10 74.963H292L282 263z" fill="#F3C82F"/> </g> <g class="sun__ray-holder"> <path class="sun__ray" d="M282 263h37.778l-10 74.963H292L282 263z" fill="#F3C82F"/> </g> <g class="sun__ray-holder"> <path class="sun__ray" d="M282 263h37.778l-10 74.963H292L282 263z" fill="#F3C82F"/> </g> <g class="sun__ray-holder"> <path class="sun__ray" d="M282 263h37.778l-10 74.963H292L282 263z" fill="#F3C82F"/> </g> <g class="sun__ray-holder"> <path class="sun__ray" d="M282 263h37.778l-10 74.963H292L282 263z" fill="#F3C82F"/> </g> <g class="sun__ray-holder"> <path class="sun__ray" d="M282 263h37.778l-10 74.963H292L282 263z" fill="#F3C82F"/> </g> <g class="sun__ray-holder"> <path class="sun__ray" d="M282 263h37.778l-10 74.963H292L282 263z" fill="#F3C82F"/> </g> <g class="sun__ray-holder"> <path class="sun__ray" d="M282 263h37.778l-10 74.963H292L282 263z" fill="#F3C82F"/> </g> <path class="sun__body" d="M300 171.626c71.46 0 129.389 57.475 129.389 128.374S371.46 428.374 300 428.374c-71.46 0-129.389-57.475-129.389-128.374 0-13.313 2.043-26.152 5.834-38.227 16.398-52.23 65.514-90.147 123.555-90.147z" fill="#FFE486"/> </g> </g> <!-- <path fill="#F3C82F" d="M479.444 318.741V281.26H555v37.481z"/> <path fill="#F3C82F" d="M281.111 47h37.778v74.963h-37.778z"/> --> <!-- <path fill="#F3C82F" d="M280.167 478.037h37.778V553h-37.778z"/> <path fill="#F3C82F" d="M45 318.741V281.26h75.556v37.481z"/> <path fill="#F3C82F" d="M440.243 187.361l-26.713-26.503 53.426-53.007 26.713 26.503z"/> <path fill="#F3C82F" d="M132.376 491.487l-26.713-26.503 53.426-53.007 26.713 26.503z"/> <path fill="#F3C82F" d="M106.331 134.354l26.713-26.503 53.426 53.006-26.713 26.504z"/> <path fill="#F3C82F" d="M106.331 134.354l26.713-26.503 53.426 53.006-26.713 26.504z"/> <path fill="#F3C82F" d="M413.53 439.143l26.713-26.503 53.426 53.006-26.713 26.504z"/> --> <g class="scene__hills"> <path class="hill" d="M217 599c0 92.232 135.954 21 228.185 21C537.417 620 658 654.232 658 562s-52.768-147-145-147-296 91.768-296 184z" fill="#83E95F"/> <path class="hill" d="M335.837 630c0 92.232-104.954 0-197.185 0-92.232 0-160.815 38.232-160.815-54S46.42 422 138.652 422c92.231 0 197.185 115.768 197.185 208z" fill="#4CA32E"/> </g> <g class="scene__cockerel"> <g class="cockerel"> <g class="cockerel__comb"> <path d="M572 278H443c-71.245 0-146 4-146 4 0-71.245 74.755-133 146-133s129 57.755 129 129z" fill="#FF0809"/> <path d="M488.608 409.325l-91.216-91.217-91.217-91.216c50.377-50.378 111.947-61.77 162.325-11.392 50.378 50.378 70.486 143.448 20.108 193.825z" fill="#FF0809"/> <path d="M550.911 339.19l-124.605-33.388-124.604-33.387C320.141 203.597 342.183 165.64 411 184.08c68.817 18.439 158.35 86.293 139.911 155.11z" fill="#FF0809"/> <path d="M471.5 440.464C471.5 509.5 441.614 539 414 539s-50-29.5-50-98.536C364 371.429 346.886 288 374.5 288s97 83.429 97 152.464z" fill="#FF0809"/> </g> <path class="cockerel__wattle" d="M281.523 438.333C281.523 478.65 257 519 199.5 525.5s-133-64-108-110.5 78-56.667 138.023-56.667c60.023 0 52 39.683 52 80z" fill="#EE0505"/> <path class="cockerel__beak cockerel__beak--left" d="M229.179 109.498l122 128.5-57 40.5-65-169z" fill="#FFF628"/> <path class="cockerel__beak cockerel__beak--right" d="M370.179 60.498L328.5 286.5l-69.321-26.502 111-199.5z" fill="#FFF628"/> <path class="cockerel__body" d="M393 391.035L400 300c0-55.2.........完整代码请登录后点击上方下载按钮下载查看
网友评论0