网站美化-侧边栏时间小卡片【动态时间】
https://www.wniui.com/wp-content/uploads/2024/11/ce7c92636520241101221602.gif部署代码后台小工具→自定义HTML<style>
.times {
margin: 0;
padding: 0;
height: 100%;
}
.times2 {
height: 100%;
background: #fff;
}
.times2 svg {
height: 100%;
width: 100%;
margin-bottom: -34px;
}
.words {
font-size: 60px;
font-weight: bold;
text-transform: uppercase;
fill: none;
stroke-width: 5px;
stroke-dasharray: 90, 310;
animation: drawing 8s linear infinite;
}
.words-1 {
stroke: deepskyblue;
text-shadow: 0 0 50px deepskyblue;
animation-delay: -2s;
}
.words-2 {
stroke: lightseagreen;
text-shadow: 0 0 50px lightseagreen;
animation-delay: -4s;
}
.words-3 {
stroke: orange;
text-shadow: 0 0 50px orange;
animation-delay: -6s;
}
.words-4 {
stroke: purple;
text-shadow: 0 0 50px purple;
animation-delay: -8s;
}
@keyframes drawing {
100% {
stroke-dashoffset: -400;
}
}
</style>
<div class="sidebox sidebox--desk">
<div class="times">
<div class="sidebox__content" style="padding: 0;">
<divstyle="border-radius:15px;" class="times2">
<svg>
<text text-anchor="middle" x="50%" y="50%" class="words words-1"></text>
<text text-anchor="middle" x="50%" y="50%" class="words words-2"></text>
<text text-anchor="middle" x="50%" y="50%" class="words words-3"></text>
<text text-anchor="middle" x="50%" y="50%" class="words words-4"></text>
</svg>
</div>
</div>
</div>
</div>
<script>
function showtime() {
const now = new Date();
let h = now.getHours();
let m = now.getMinutes();
let s = now.getSeconds();
h = checktime(h);
m = checktime(m);
s = checktime(s);
return `${h}:${m}:${s}`;
}
function checktime(x) {
return x < 10 ? `0${x}` : x;
}
const texts = document.querySelectorAll("text");
setInterval(() => {
const time = showtime();
texts.forEach(text => {
text.textContent = time;
});
}, 1000);
</script>
页:
[1]