白日與晝夜（可複制源代碼），网站设计可以用于到页面切换的酷炫效果，可以为页面设置为白天模式，或者夜晚模式，效果如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>白日與晝夜</title> <style> body{height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;background-color:var(--color)}*{margin:0;padding:0}#switch{display:flex;justify-content:center;align-items:center}#switch input{opacity:0;width:0;height:0}#slider{position:relative;height:60px;width:200px;cursor:pointer;border-radius:34px;transition:0.2s;background-color:#482752;box-shadow:3px 6px 100px 1px #000}#slider div{border-radius:50%;background-color:rgb(190,190,190);position:absolute;z-index:10000;opacity:1;transition:transform 0.4s cubic-bezier(1,0.09,0,0.54)}#slider div:nth-of-type(1){height:15px;width:15px;left:30px;bottom:10px}#slider div:nth-of-type(2){height:8px;width:8px;left:20px;bottom:30px}#slider:before{content:"";height:48px;background-color:rgb(71,64,80);border-radius:34px;border:3px solid rgb(115,111,121);position:absolute;left:2px;bottom:3px;animation:slider_animation_reverse 0.4s 1 cubic-bezier(1,0.09,0,0.54) forwards}input:checked + #slider:before{bottom:1px;background-color:#ffcc33;border:solid 5px orange;animation:slider_animation 0.4s 1 cubic-bezier(1,0.09,0,0.54) forwards}input:checked + #slider{background-color:rgb(103,194,255)}input:checked + #slider div{opacity:0;transform:translate(138px);transition:transform 0.4s cubic-bezier(1,0.09,0,0.54)}input:checked + #slider + #background{background-color:#cdf0ff}input:checked + #slider + #background div::after{display:none}@keyframes slider_animation{0%{width:48px;transform:translateX(0)}50%{width:198px;transform:translateX(0)}100%{width:48px;transform:translateX(138px)}}@keyframes slider_animation_reverse{0%{width:48px;transform:translateX(138px)}50%{width:198px;transform:translateX(0)}100%{width:48px;transform:translateX(0)}}#background{display:flex;align-items:flex-end;position:absolute;width:100vw;height:100vh;background-color:#240046;transition:0.4s;top:0;left:0;z-index:-1}#skyscrapers{width:100%;display:flex;justify-content:center;align-items:flex-end}.skyscraper{display:flex;flex-direction:column;align-items:center;justify-content:center;height:var(--height);min-width:var(--width)}.conductor{height:15%;border-radius:10px 10px 0 0;width:4px;background-color:#333333}.skyscraper div:nth-of-type(2),.skyscraper div:nth-of-type(3){background-color:#757575}.skyscraper div:nth-of-type(4),.skyscraper div:nth-of-type(5){background-color:#838383}.skyscraper div:nth-of-type(2){width:40%;height:5%}.skyscraper div:nth-of-type(3){width:55%;height:10%}.skyscraper div:nth-of-type(4){position:relative;width:80%;height:25%}.skyscraper div:nth-of-type(4)::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:15px;width:15px;border-radius:50%;background-color:#ffcc33;box-shadow:0px 0px 200px 50px #f9d33e}.skyscraper div:nth-of-type(5){width:100%;height:45%} </style></head><body> <label id="switch"> <input type="checkbox"> <span id="slider"> <div></div> <div></div> </span> <div id="background"> <div id="skyscrapers"> <div class="skyscraper" style="--height:350px;--width:150px"> <div class="conductor"></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="skyscraper" style="--height:300px;--width:120px"> <div class="conductor"></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="skyscraper" style="--height:400px;--width:150px"> <div class="conductor"></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="skyscraper" style="--height:340px;--width:160px"> <div class="conductor"></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="skyscraper" style="--height:320px;--width:200px"> <div class="conductor"></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="skyscraper" style="--height:380px;--width:190px"> <div class="conductor"></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="skyscraper" style="--height:500px;--width:100px"> <div class="conductor"></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="skyscraper" style="--height:350px;--width:300px"> <div class="conductor"></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="skyscraper" style="--height:250px;--width:100px"> <div class="conductor"></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div> </label></body></html>
掃描查看手機版網站
