网站美化-侧边栏时间小卡片【动态时间】

竹林

部署代码

后台小工具→自定义HTML

1. <style>
   
2.   .times {
   
3.     margin: 0;
   
4.     padding: 0;
   
5.     height: 100%;
   
6.   }
   
7. 
   
8.   .times2 {
   
9.     height: 100%;
   
10.     background: #fff;
    
11.   }
    
12. 
    
13.   .times2 svg {
    
14.     height: 100%;
    
15.     width: 100%;
    
16.     margin-bottom: -34px;
    
17.   }
    
18. 
    
19.   .words {
    
20.     font-size: 60px;
    
21.     font-weight: bold;
    
22.     text-transform: uppercase;
    
23.     fill: none;
    
24.     stroke-width: 5px;
    
25.     stroke-dasharray: 90, 310;
    
26.     animation: drawing 8s linear infinite;
    
27.   }
    
28. 
    
29.   .words-1 {
    
30.     stroke: deepskyblue;
    
31.     text-shadow: 0 0 50px deepskyblue;
    
32.     animation-delay: -2s;
    
33.   }
    
34. 
    
35.   .words-2 {
    
36.     stroke: lightseagreen;
    
37.     text-shadow: 0 0 50px lightseagreen;
    
38.     animation-delay: -4s;
    
39.   }
    
40. 
    
41.   .words-3 {
    
42.     stroke: orange;
    
43.     text-shadow: 0 0 50px orange;
    
44.     animation-delay: -6s;
    
45.   }
    
46. 
    
47.   .words-4 {
    
48.     stroke: purple;
    
49.     text-shadow: 0 0 50px purple;
    
50.     animation-delay: -8s;
    
51.   }
    
52. 
    
53.   @keyframes drawing {
    
54.     100% {
    
55.       stroke-dashoffset: -400;
    
56.     }
    
57.   }
    
58. </style>
    
59. 
    
60. <div class="sidebox sidebox--desk">
    
61.   <div class="times">
    
62.     <div class="sidebox__content" style="padding: 0;">
    
63.       <div  style="border-radius:15px;" class="times2">
    
64.         <svg>
    
65.           <text text-anchor="middle" x="50%" y="50%" class="words words-1"></text>
    
66.           <text text-anchor="middle" x="50%" y="50%" class="words words-2"></text>
    
67.           <text text-anchor="middle" x="50%" y="50%" class="words words-3"></text>
    
68.           <text text-anchor="middle" x="50%" y="50%" class="words words-4"></text>
    
69.         </svg>
    
70.       </div>
    
71.     </div>
    
72.   </div>
    
73. </div>
    
74. 
    
75. <script>
    
76.   function showtime() {
    
77.     const now = new Date();
    
78.     let h = now.getHours();
    
79.     let m = now.getMinutes();
    
80.     let s = now.getSeconds();
    
81.     h = checktime(h);
    
82.     m = checktime(m);
    
83.     s = checktime(s);
    
84.     return `${h}:${m}:${s}`;
    
85.   }
    
86. 
    
87.   function checktime(x) {
    
88.     return x < 10 ? `0${x}` : x;
    
89.   }
    
90. 
    
91.   const texts = document.querySelectorAll("text");
    
92. 
    
93.   setInterval(() => {
    
94.     const time = showtime();
    
95.     texts.forEach(text => {
    
96.       text.textContent = time;
    
97.     });
    
98.   }, 1000);
    
99. </script>

复制代码