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

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

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