下载 点击下载
介绍 SlidingClock是由Wallpaper engine创意工坊-DarkBlue的作者开发,可做动态桌面壁纸,非常的简约精美,适合收藏。
源码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 * { box-sizing: border-box; padding: 0; margin: 0; } html { place-items: center; } body { font-family: monospace; font-size: 2rem; min-height: 100vh; display: grid; overflow-y: hidden; place-items: center; background: linear-gradient(-45deg, #c4d2ef, #dfe6f6); } .hr, .min, .sec { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 3rem; grid-row: 1/2; align-items: start; } .number { padding: 0.5em; width: 4rem; height: 4rem; display: grid; place-items: center; color: #f9fbfd; transition: all 500ms 100ms ease; border-radius: 50%; } .number.pop { color: #3e6ccb; font-weight: bold; transform: scale(1.3); background-color: #dfe6f6; box-shadow: -10px -10px 20px -5px #f9fbfd, 10px 10px 20px #a9bee8; } .strip { transition: transform 500ms ease-in-out; border-radius: 8px; background-color: #dfe6f6; box-shadow: -10px -10px 20px -5px #f9fbfd, 10px 10px 20px #a9bee8; } .clock { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 5rem; height: 4rem; position: relative; padding: 0 4rem; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 const strips = [...document.querySelectorAll(".strip")]; const numberSize = "4"; // in rem var lastTime = new Array(-1, -1, -1) // highlight number i on strip s for 1 second function highlight(strip, d) { strips[strip] .querySelector(`.number:nth-of-type(${d + 1})`) .classList.add("pop"); setTimeout(() => { strips[strip] .querySelector(`.number:nth-of-type(${d + 1})`) .classList.remove("pop"); }, 950); // causes ticking } function stripSlider(strip, id, number) { let d1 = Math.floor(number / 10); let d2 = number % 10; if (lastTime[id] == -1 || lastTime[id] != number) { strips[strip].style.transform = `translateY(${d1 * -numberSize}rem)`; strips[strip + 1].style.transform = `translateY(${d2 * -numberSize}rem)`; lastTime[id] = number; } highlight(strip, d1); highlight(strip + 1, d2); } function updateClock() { // get new time const time = new Date(); // get h,m,s const hours = time.getHours(); const mins = time.getMinutes(); const secs = time.getSeconds(); // slide strips stripSlider(0, 0, hours); stripSlider(2, 1, mins); stripSlider(4, 2, secs); } // set Timer for clock-update setInterval(updateClock, 1000); updateClock();
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/index.css" /> <title></title> </head> <body> <div class="clock"> <div class="hr"> <div class="strip"> <div class="number">0</div> <div class="number">1</div> <div class="number">2</div> </div> <div class="strip"> <div class="number">0</div> <div class="number">1</div> <div class="number">2</div> <div class="number">3</div> <div class="number">4</div> <div class="number">5</div> <div class="number">6</div> <div class="number">7</div> <div class="number">8</div> <div class="number">9</div> </div> </div> <div class="min"> <div class="strip"> <div class="number">0</div> <div class="number">1</div> <div class="number">2</div> <div class="number">3</div> <div class="number">4</div> <div class="number">5</div> </div> <div class="strip"> <div class="number">0</div> <div class="number">1</div> <div class="number">2</div> <div class="number">3</div> <div class="number">4</div> <div class="number">5</div> <div class="number">6</div> <div class="number">7</div> <div class="number">8</div> <div class="number">9</div> </div> </div> <div class="sec"> <div class="strip"> <div class="number">0</div> <div class="number">1</div> <div class="number">2</div> <div class="number">3</div> <div class="number">4</div> <div class="number">5</div> </div> <div class="strip"> <div class="number">0</div> <div class="number">1</div> <div class="number">2</div> <div class="number">3</div> <div class="number">4</div> <div class="number">5</div> <div class="number">6</div> <div class="number">7</div> <div class="number">8</div> <div class="number">9</div> </div> </div> </div> <script type="text/javascript" src="js/sliderClock.js"></script> </body> </html>
预览