【动画制作】祝你周六快乐！（精美代码座钟）

夕阳黄昏

秋思梦景 发表于 2024-11-16 19:04 问候老师好！感谢您欣鼓励和支持！但是不知什么原因遮住评分。

1. <style>
2. #papa { text-align:center;width:840px;position:relative;background-color:lightgray; }
3. #hHand, #mHand, #sHand { animation: turning var(--dur) linear infinite; }
4. #hHand { --begin: 0deg; --dur: 216000s; }
5. #mHand { --begin: 0deg; --dur: 3600s; }
6. #sHand { --begin: 0deg; --dur: 60s; }
7. #kedu { font: normal 16px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; text-anchor: middle; dominant-baseline: middle; fill: cyan; user-select: none; }
8. @keyframes turning { from { transform: rotate(var(--begin)); } to { transform: rotate(calc(360deg + var(--begin))); } }
9. #clock {position:absolute;top:115px;left:263px;}
10. </style>
12. <div id="papa">
13. <img src="https://cccimg.com/view.php/f0c33158b44b682a5247743fe976aef0.gif"/>
14. <svg id="clock" width="300" height="300" viewBox="-100 -100 200 200">
15. <defs>
16. <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
17. <stop offset="0%" stop-color="red" />
18. <stop offset="50%" stop-color="green" />
19. <stop offset="100%" stop-color="navy" />
20. </linearGradient>
21. </defs>
22. <circle cx="0" cy="0" r="95" fill="dimgray" stroke="url(#bg)" stroke-width="10" />
23. <g id="kedu">
24. <text font-size="14" fill="silver" text-anchor="middle">
25. <tspan id="tdate" x="5" y="-35">日期</tspan>
26. <tspan id="tday" x="0" y="-15">星期</tspan>
27. <tspan x="0" y="40" fill="gray">HUACHAO</tspan>
28. </text>
29. </g>
30. <line id="hHand" x1="0" y1="0" x2="0" y2="-65" stroke="whitesmoke" stroke-width="4" />
31. <line id="mHand" x1="0" y1="0" x2="0" y2="-75" stroke="snow" stroke-width="3" />
32. <line id="sHand" x1="0" y1="0" x2="0" y2="-85" stroke="white" stroke-width="2" />
33. <circle cx="0" cy="0" r="6" fill="red" stroke="white" stroke-width="2" />
34. </svg>
35. <img src="https://cccimg.com/view.php/b574f0b82ab9e960c3209b6f828825ab.gif"/>
36. <audio src="https://www.kumeiwp.com/wj/142845/2023/04/03/498dd0eb49795f7858477ab28fde0aac.mp3" autoplay loop />
37. </div>
39. <script>
40. setAttr = (elm, objData) => {
41. for(var key in objData) {
42. elm.setAttribute(key, objData[key]);
43. }
44. };
46. mkScale = (total=60) => {
47. var deg = 360 / total;
48. Array(total).fill('').forEach((l,k) => {
49. var w = -6;
50. if(k % 5 === 0) {
51. var t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
52. setAttr(t, {transform: `rotate(${deg * k - 60} 0 0) translate(75) rotate(${-1 * (deg * k - 60)} 0 0)`});
53. t.textContent = k / 5 + 1;
54. kedu.appendChild(t);
55. w = -4;
56. }
57. l = document.createElementNS('http://www.w3.org/2000/svg', 'line');
58. setAttr(l, {transform: `rotate(${deg * k - 60} 0 0) translate(90)`, x1: 0, y1: 0, x2: w, y2: 0, stroke: 'cyan'});
59. kedu.appendChild(l);
60. });
61. };
63. setTime = () => {
64. var now = new Date();
65. var hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
66. min = now.getMinutes(),
67. sec = now.getSeconds(),
68. msec = now.getMilliseconds();
69. var hDeg = hr * 30 + (min * 6 / 12),
70. mDeg = min * 6 + (sec * 6 / 60),
71. sDeg = sec * 6 + (msec * 0.36 / 1000);
72. hHand.style.setProperty('--begin', hDeg + 'deg');
73. mHand.style.setProperty('--begin', mDeg + 'deg');
74. sHand.style.setProperty('--begin', sDeg + 'deg');
75. };
77. setDate = () => {
78. var sDate = new Date();
79. var sDateS = sDate.getSeconds() * 1000,
80. sDateMs = sDate.getMilliseconds();
81. tdate.textContent = `${sDate.getFullYear()}年${sDate.getMonth() + 1}月${sDate.getDate()}日`;
82. tday.textContent = `星期${'日一二三四五六'.substr(sDate.getDay(),1)}`;
83. setTimeout( () => {
84. setDate();
85. }, 60000 - sDateS - sDateMs);
86. };
88. mkScale();
89. setTime();
90. setDate();
91. </script>

复制代码

红影

秋思梦景 发表于 2024-11-16 19:03
问候老师好！感谢您欣鼓励和支持！但是不知什么原因遮住评分。

应该是代码里空间撑开不够？去看了一下，修改后把钟座弄得看不到了呢