svg+gsap实现带音效昼夜切换动画效果代码-html代码-BFW代码库

代码语言：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="#C4C4C.........完整代码请登录后点击上方下载按钮下载查看