toruskit+svg实现黑夜白昼切换动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：toruskit+svg实现黑夜白昼切换动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
	margin: 0;
	padding: 0;	
}

#scene {
	width: 100%;
	height: 100%;
	display: block;	
}

#wrapper {
	height: 100vh;
	position: relative;
}

#blend {
	mix-blend-mode: hard-light;
	pointer-events: none;
}

#switch {
	position: absolute;
	right: 0;
	background: black;
	margin: 4rem;
	display: flex;
	width: 8rem;
	height: 4rem;
	border-radius: 3rem;
	align-items: center;
	justify-content: space-around;
	cursor: pointer;
	box-shadow: 0px 4px 30px rgb(0 0 0 / 50%);
}

#switch-moon {
	z-index: 1;
}

#switch input {
	visibility: hidden;
	position: absolute;
}

#made-with {
	background-color: rgb(40 40 40 / 30%);
	bottom: 0;
	color: #fff;
	display: flex;
	font-family: Inter, sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	margin: 1rem;	
	padding: 0.5rem 0.7rem;
	position: fixed;
	right: 0;
	text-transform: uppercase;
	text-decoration: none;
}
</style>

</head>
<body>

<div
  id="wrapper"
  data-tor-group="
    #blend => o(0) .night(#wrapper):o(1);

    #cloud_1 => .night(#wrapper):[o(0 <0.5s>) tx(-2rem <2.5s, elastic>)] animate:tx(4rem <13s, alternate, infinite>);
    #cloud_2 => .night(#wrapper):[o(0 <0.5s>) tx(2rem <2.5s, elastic, delay: 75ms>)] animate:tx(-5rem <15s, alternate, infinite>);
    #cloud_3 => .night(#wrapper):[o(0 <0.5s>) tx(2rem <2.5s, elastic, delay: 150ms>)] animate:tx(-3rem <8s, alternate, infinite>);

    #sun => .night(#wrapper):[o(0) ty(4rem <2.5s, elastic>)];
    #moon => o(0) ty(4rem) .night(#wrapper):[o(1) ty(0rem <2.5s, elastic>)];

    .star => o(0) ty(\random(1, 3)\rem) filter(drop-shadow(0px 0px 5px rgba(255,255,255,1))) transform-box(fill-box) transform-origin(center)
            .night(#wrapper):[
              o(1)
              ty(0rem <\random(1.5, 2)\s, elastic, delay: \random(50, 150)\ms>)
              s(\random(1.2, 1.5)\ <\random(1, 4)\s, infinite, alternate, delay: \random(0.5, 1)\s>)
            ];

    #windows => o(0) .night(#wrapper):o(1) mouse(x):parallax-x(0.75rem <2s>);

    #hill_1 => mouse(x):parallax-x(1.5rem <2s>);
    #hill_2 => mouse(x):parallax-x(1rem <2s>);
    #hill_3 => mouse(x):parallax-x(0.75rem <2s>);
    #hill_4 => mouse(x):parallax-x(0.5rem <2s>);
    #hill_5 => mouse(x):parallax-x(0.25rem <2s>);
    #hill_6 => mouse(x):parallax-x(0.05rem <2s>);

    #switch-sun => .night(#wrapper):tx(4rem);
    #switch-moon => o(.5) .night(#wrapper):o(1);
  "
>
  <label for="switch-checkbox" id="switch">
    <svg id="switch-sun" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="47.2" height="47.2" style="enable-background:new 0 0 47.2 47.2">
      <circle cx="23.6" cy="23.6" r="23.6" style="fill:#5b51c8"/>
    </svg>
    <svg id="switch-moon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="47.2" height="47.2" style="enable-background:new 0 0 47.2 47.2">
      <path d="M34.3 2.6c1.6 3.2 2.6 6.9 2.6 10.7 0 13-10.6 23.6-23.6 23.6-3.9 0-7.5-.9-10.7-2.6 3.9 7.7 11.9 12.9 21 12.9 13 0 23.6-10.6 23.6-23.6 0-9.2-5.2-17.1-12.9-21z" style="fill:#fff"/>
    </svg>
    <input type="checkbox" name="switch" id="switch-checkbox" data-tor="check:toggle(class <name: night, target: #wrapper>)">
  </label>
  <svg id="scene" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" style="enable-background:new 0 0 1920 1080" xml:space="preserve">
    <style>
      .st2{fill:#fff}.st17{fill:#fdedff}
    </style>
    <symbol id="tree" viewBox="-31.5 -49.7 62.9 99.3">
      <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="49.6563" x2="0" y2="-49.6563">
        <stop offset="0" style="stop-color:#fff"/>
        <stop offset="1" style="stop-color:#544ac5"/>
      </linearGradient>
      <path style="fill:url(#SVGID_1_)" d="M-31.5-49.7 0 49.7l31.5-99.4z"/>
    </symbol>
    <g id="sky">
      <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="960" y1="-11.3182" x2="960" y2="1091.2507">
        <stop offset="0" style="stop-color:#5469d4"/>
        <stop offset=".046" style="stop-color:#6a78d6"/>
        <stop offset=".1361" style="stop-color:#9092d9"/>
        <stop offset=".2335" style="stop-color:#b0a8dc"/>
        <stop offset=".338.........完整代码请登录后点击上方下载按钮下载查看