大家我呀,我是yangyang,此刻看到一个小特效,是国外一哥们做的,特来分享给大家.
效果介绍
数字时代，数字发光时钟体现了形式与功能的融合。在这篇文章中，我们将深入研究如何使用 HTML、CSS 和 JavaScript 来构建一个。
HTML
构建一个结构化基础，其中包含小时、分钟、秒和可选的 AM/PM 指示器元素。可访问性至关重要，因此我们将使用语义标签并提供有意义的描述。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Digital clock</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="hero">
<div class="box">
<style></style>
<div class="clock">
<span id="hrs">00</span>
<span>:</span>
<span id="min">00</span>
<span>:</span>
<span id="sec">00</span>
</div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
css
利用 box-shadow 和 text-shadow 等属性，我们将为时钟注入活力。通过微调颜色和发光强度，我们将确保它吸引用户。
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
box-sizing: border-box;
}
.hero {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #2f363e;
position: relative;
}
.box {
position: relative;
width: 800px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.clock {
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(40px);
color: #6e7f92f6;
z-index: 10;
}
.clock span {
font-size: 80px;
width: 110px;
display: inline-block;
text-align: center;
position: relative;
}
.clock span::after {
font-size: 16px;
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
}
#hrs::after {
content: "HOURES";
color: #0f0;
font-weight: 600;
margin-bottom: -10px;
}
#min::after {
content: "MINS";
color: #0ff;
font-weight: 600;
margin-bottom: -10px;
}
#sec::after {
content: "SEC";
color: #ff0;
font-weight: 600;
margin-bottom: -10px;
}
/*------Anemated Border---------*/
.box::before {
content: "";
position: absolute;
inset: 0;
background: repeating-conic-gradient(
from var(--a),
#0f0,
#ff0,
#0ff,
#f0f,
#0ff
);
border-radius: 20px;
animation: rotate 6s linear infinite;
}
.box::after {
content: "";
position: absolute;
inset: 0;
background: repeating-conic-gradient(
from var(--a),
#0f0,
#ff0,
#0ff,
#f0f,
#0ff
);
border-radius: 20px;
animation: rotate 4s linear infinite;
filter: blur(40px);
opacity: 0.75;
}
.box style {
position: absolute;
inset: 4px;
background: #2f363e;
border-radius: 16px;
color: #ff0;
font-size: 20px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
@property --a {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
@keyframes rotate {
0% {
--a: 0;
}
0% {
--a: -360deg;
}
}js
JavaScript 为我们的时钟注入了活力，实现了小时、分钟和秒的实时更新。我们还将考虑添加时区支持和用户偏好的自定义选项等功能。
let hrs = document.getElementById("hrs");
let min = document.getElementById("min");
let sec = document.getElementById("sec");
setInterval(() => {
let currentTime = new Date();
hrs.innerHTML =
(currentTime.getHours() < 10 ? "0" : "") + currentTime.getHours();
min.innerHTML =
(currentTime.getMinutes() < 10 ? "0" : "") + currentTime.getMinutes();
sec.innerHTML =
(currentTime.getSeconds() < 10 ? "0" : "") + currentTime.getSeconds();
}, 1000);