toruskit+svg实现黑夜白昼切换动画效果代码
代码语言：html
所属分类：其他
代码描述：toruskit+svg实现黑夜白昼切换动画效果代码
代码标签： 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=".3382" style="stop-color:#cabadf"/>
<stop offset=".4526" style="stop-color:#dfc8e1"/>
<stop offset=".5821" style="stop-color:#edd2e2"/>
<stop offset=".739" style="stop-color:#f5d7e3"/>
<stop offset="1" style="stop-color:#f8d9e3"/>
</linearGradient>
<path style="fill:url(#SVGID_2_)" d="M-20-11.3h1960v1102.6H-20z"/>
</g>
<g id="mountain">
<g id="sun">
<g>
<circle class="st2" cx="802" cy="180.9" r="93"/>
</g>
</g>
<g id="hill_7">
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="1474.5" y1="141.3095" x2="1474.5" y2="691.8898">
<stop offset="0" style="stop-color:#7570d6"/>
<stop offset="1" style="stop-color:#423cc4"/>
</linearGradient>
<path style="fill:url(#SVGID_3_)" d="m923.9 691.9 550.6-550.6 550.6 550.6z"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="1612.645" y1="141.3095" x2="1612.645" y2="446.3898">
<stop offset="0" style="stop-color:#101f63"/>
<stop offset="1" style="stop-color:#101f63;stop-opacity:0"/>
</linearGradient>
<path style="fill:url(#SVGID_4_)" d="m1474.5 141.3 26.5 110.1-39 13.5 93 181.5 208.3-16.3z"/>
</g>
<g id="hill_6">
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="534.5" y1="209.3095" x2="534.5" y2="759.8898">
<stop offset="0" style="stop-color:#7570d6"/>
<stop offset="1" style="stop-color:#423cc4"/>
</linearGradient>
<path style="fill:url(#SVGID_5_)" d="m-16.1 759.9 550.6-550.6 550.6 550.6z"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="363.8549" y1="209.3095" x2="363.8549" y2="636.8898">
<stop offset="0" style="stop-color:#081863"/>
<stop offset="1" style="stop-color:#081863;stop-opacity:0"/>
</linearGradient>
<path style="fill:url(#SVGID_6_)" d="m534.5 209.3 36.5 87.1-46.5 21 23.3 130.5-95 189-296.1-49.8z"/>
</g>
<g id="hill_5">
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="1097.4197" y1="327.3094" x2="1097.4197" y2="971.8898">
<stop offset="0" style="stop-color:#dcd0f5"/>
<stop offset="1" style="stop-color:#745fdf"/>
</linearGradient>
<path style="fill:url(#SVGID_7_)" d="m452.8 971.9 644.6-644.6L1742 971.9z"/>
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="938.2314" y1="327.3094" x2="938.2314" y2="649.5996">
<stop offset="0" style="stop-color:#fff"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<path style="opacity:.5;fill:url(#SVGID_8_)" d="m1097.4 327.3-62.7 153.3 66.6 66-36.6 103H775.1z"/>
</g>
<g id="clouds">
<path id="cloud_3" class="st2" d="M1505.8 219.2c11.4-10.8 18.5-26.1 18.5-43.1 0-32.8-26.6-59.4-59.4-59.4-25.1 0-46.6 15.6-55.3 37.6-1.2-.1-2.4-.2-3.6-.2-6 0-11.7 1.3-16.8 3.6-8.1-7.8-19.2-12.6-31.3-12.6-21.6 0-39.7 15.2-44.1 35.4-1.6-.3-3.2-.4-4.8-.4-15.3 0-27.7 12.4-27.7 27.7v.5c-3.1-5.9-9.3-10-16.5-10-10.3 0-18.6 8.3-18.6 18.6s8.3 18.6 18.6 18.6H1538l-32.2-16.3z"/>
<path id="cloud_2" class="st2" d="M1255.2 423c5.8-7.4 9.4-16.7 9.4-26.8 0-23.8-19.3-43.1-43.1-43.1-6.1 0-11.9 1.3-17.1 3.5-9-9.6-21.7-15.5-35.8-15.5-18.3 0-34.3 10-42.7 24.9h-.6c-12.9 0-24.2 6.7-30.7 16.7-4-2-8.5-3.1-13.3-3.1-13.8 0-25.4 9.4-28.8 22.2-3.2-2-6.9-3.2-10.9-3.2-11.2 0-20.3 9.1-20.3 20.3s9.1 20.3 20.3 20.3h245.7l-32.1-16.2z"/>
<path id="cloud_1" class="st2" d="M482.4 317.8c4.7-4.6 7.6-11.1 7.6-18.2 0-14.2-11.5-25.6-25.6-25.6-3 0-6 .5-8.7 1.5-5.7-9.9-16.4-16.5-28.7-16.5-2.6 0-5.2.3-7.7.9-7.4-14.9-22.7-25.1-40.5-25.1-16.1 0-30.2 8.4-38.2 21-3.3-1.8-7-2.8-10.8-2.8-15.3 0-27.7 16.2-27.7 36.1 0 6 1.1 11.6 3.1 16.6l-1 1c0-10.3-8.3-18.6-18.6-18.6s-18.6 8.3-18.6 18.6 8.3 18.6 18.6 18.6h211.2l-14.4-7.5z"/>
</g>
<g id="hill_4">
<g>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="-1.4111" y1="-24.1102" x2="-1.4111" y2="1104.8898">
<stop offset="0" style="stop-color:#b6aae9"/>
<stop offset="1" style="stop-color:#604dd8"/>
</linearGradient>
<path style="fill:url(#SVGID_9_)" d="m-1130.4 1104.9 1129-1129 1129 1129z"/>
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="233.7646" y1="-24.1102" x2="233.7646" y2="495.2532">
<stop offset="0" style="stop-color:#fff"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<path style="opacity:.2;fill:url(#SVGID_10_)" d="m-1.4-24.1 45.1 187.4-66.4 23 158.3 309 354.6-27.8z"/>
</g>
<use xlink:href="#tree" width="62.9" height="99.3" x="-31.5" y="-49.7" transform="matrix(.714 0 0 -.714 534.5 985.1212)" style="overflow:visible"/>
<use xlink:href="#tree" width="62.9" height="99.3" x="-31.5" y="-49.7" transform="matrix(.714 0 0 -.714 548.5429 1000.243)" style="overflow:visible"/>
<use xlink:href="#tree" width="62.9" height="99.3" x="-31.5" y="-49.7" transform="matrix(.5186 0 0 -.5186 663.3661 942.8898)" style="overflow:visible"/>
<use xlink:href="#tree" width="62.9" height="99.3" x="-31.5" y="-49.7" transform="matrix(1.07 0 0 -1.07 629.713 1049.5225)" style="overflow:visible"/>
<use xlink:href="#tree" width="62.9" height="99.3" x="-31.5" y="-49.7" transform="matrix(.5618 0 0 -.5618 750.4964 949.6652)" style="overflow:visible"/>
<use xlink:href="#tree" width="62.9" height="99.3" x="-31.5" y="-49.7" transform="matrix(.4537 0 0 -.4537 848.3956 911.0847)" style="overflow:visible"/>
<use xlink:href="#tree" width="62.9" height="99.3" x="-31.5" y="-49.7" transform="matrix(.4537 0 0 -.4537 750.4964 878.8439)" style="overflow:visible"/>
<use xlink:href="#tree" width="62.9" height="99.3" x="-31.5" y="-49.7" transform="matrix(.4537 0 0 -.4537 448.6554 917.2711)" style="overflow:visible"/>
<use xlink:href="#tree" width="62.9" height="99.3" x="-31.5" y="-49.7" transform="matrix(.7739 0 0 -.7739 466.3385 926.9872)" style="overflow:visible"/>
<use xlink:href="#tree" width="62.9" height="99.3" x="-31.5" y="-49.7" transform="matrix(.5618 0 0 -.5618 732.8282 958.4412)" style="overflow:visible"/>
</g>
<g id="hill_2">
<g>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="18.5889" y1="480.3009" x2="18.5889" y2="1094.8898">
<stop offset="0" style="stop-color:#f9e7fe"/>
<stop offset="1" style="stop-color:#836be7"/>
</linearGradient>
<path style="fill:url(#SVGID_11_)" d="M-596 1094.9 18.6 480.3l614.6 614.6z"/>
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="464.2741" y1="480.3009" x2="464.2741" y2="785.3812" gradientTransform="matrix(-1 0 0 1 338.4679 0)">
<stop offset="0" style="stop-color:#101f63"/>
<stop offset="1" style="stop-color:#101f63;stop-opacity:0"/>
</linearGradient>
<path style="opacity:.2;fill:url(#SVGID_12_)" d="M18.6 480.3-7.9 590.4l26.5 59.2-80.5 135.8-208.3-16.3z"/>
</g>
<use xlink:href="#tree" width="62.9" height="99.3" x="-31.5" y="-49.7" transform="matrix(1 0 0 -1 148.253 880.8898)" style="overflow:visible"/>
<use xlink:href="#tree" width="62.9" height="99.3" x="-31.5" y="-49.7" transform="matrix(.6087 0 0 -.6087 320.0962 848.6193)" style="overflow:visible"/>
<use xlink:href="#tree" width="62.9" height="99.3" x="-31.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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