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>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0