HTML+CSS制作炫彩的数字时钟
效果图如下：
HTML部分代码如下：
<!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数字时钟</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="clock_box"> <div class="clock"> <p id="time"></p> </div> </div> <script> // 获取页面id=time的元素（P元素<p id="time">12:12:12 AM</p>） var time = document.querySelector("#time"); // 定义函数传入time元素 function up(time_el) { // 获取当前时间 let date = new Date(); // 获取时分秒 let h = date.getHours(); let m = date.getMinutes(); let s = date.getSeconds(); // 上午与下午 let day_night = "AM"; // 计算上午与下午 if (h > 12) { h = h - 12; day_night = "PM"; } // 如果时间小于10则前面补充0 if (h < 10) { h = "0" + h; } if (m < 10) { m = "0" + m; } if (s < 10) { s = "0" + s; } // 拼接时间并且赋值给time元素的文本中，从而显示 time_el.textContent = h + ":" + m + ":" + s + " " + day_night; } // 定时器，每秒执行一次实现更新 setInterval(() => { up(time); }, 1000); </script> </body> </html>
CSS部分代码如下：
:root { --color2: #56d5fc; --color4: #def700; --color6: #fa3195; } * { margin: 0; padding: 0; } html { font-size: 14px; } body { width: 100vw; height: 100vh; background-color: #000; display: flex; justify-content: center; align-items: center; font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei'; } .clock_box { position: relative; width: 380px; height: 80px; border-radius: 10px; background-image: linear-gradient(135deg, var(--color2), var(--color4), var(--color6)); /* 居中 */ display: flex; justify-content: center; align-items: center; animation: animate 4s linear infinite; } .clock_box::after, .clock_box::before { position: absolute; content: ""; /* 集成父级样式 */ background-image: inherit; width: 100%; height: 100%; z-index: -1; border-radius: 10px; filter: blur(15px); } .clock_box::before { filter: blur(100px); } .clock { position: absolute; left: 10px; right: 10px; top: 10px; bottom: 10px; background-color: #2b2a2a; border-radius: 8px; /* 居中 */ display: flex; justify-content: center; align-items: center; } .clock p { font-size: 50px; font-weight: bold; color: transparent; letter-spacing: 2px; background-image: linear-gradient(135deg, var(--color2), var(--color4), var(--color6)); /* text不是通用样式属性值 */ background-clip: text; /* 这个是chrome */ -webkit-background-clip: text; } @keyframes animate { 100% { /* 色相变化 */ filter: hue-rotate(360deg); } }
