【动画制作】祝你周六快乐！（精美代码座钟）
本帖最后由 秋思梦景 于 2024-11-16 18:56 编辑 <br /><br /><div style="left:150px; width:460px; position:relative; top:195px;"><style>
#papa { margin: 30px; text-align:center; }
#hHand, #mHand, #sHand { animation: turning var(--dur) linear infinite; }
#hHand { --begin: 0deg; --dur: 216000s; }
#mHand { --begin: 0deg; --dur: 3600s; }
#sHand { --begin: 0deg; --dur: 60s; }
#kedu { font: normal 16px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; text-anchor: middle; dominant-baseline: middle; fill: cyan; user-select: none; }
@keyframes turning { from { transform: rotate(var(--begin)); } to { transform: rotate(calc(360deg + var(--begin))); } }
</style>
<div id="papa">
<svg id="clock" width="300" height="300" viewBox="-100 -100 200 200">
<defs>
<linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="navy" />
</linearGradient>
</defs>
<circle cx="0" cy="0" r="95" fill="dimgray" stroke="url(#bg)" stroke-width="10" />
<g id="kedu">
<text font-size="14" fill="silver" text-anchor="middle">
<tspan id="tdate" x="5" y="-35">日期</tspan>
<tspan id="tday" x="0" y="-15">星期</tspan>
<tspan x="0" y="40" fill="gray">HUACHAO</tspan>
</text>
</g>
<line id="hHand" x1="0" y1="0" x2="0" y2="-65" stroke="whitesmoke" stroke-width="4" />
<line id="mHand" x1="0" y1="0" x2="0" y2="-75" stroke="snow" stroke-width="3" />
<line id="sHand" x1="0" y1="0" x2="0" y2="-85" stroke="white" stroke-width="2" />
<circle cx="0" cy="0" r="6" fill="red" stroke="white" stroke-width="2" />
</svg>
</div>
<script>
setAttr = (elm, objData) => {
for(var key in objData) {
elm.setAttribute(key, objData);
}
};
mkScale = (total=60) => {
var deg = 360 / total;
Array(total).fill('').forEach((l,k) => {
var w = -6;
if(k % 5 === 0) {
var t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
setAttr(t, {transform: `rotate(${deg * k - 60} 0 0) translate(75) rotate(${-1 * (deg * k - 60)} 0 0)`});
t.textContent = k / 5 + 1;
kedu.appendChild(t);
w = -4;
}
l = document.createElementNS('http://www.w3.org/2000/svg', 'line');
setAttr(l, {transform: `rotate(${deg * k - 60} 0 0) translate(90)`, x1: 0, y1: 0, x2: w, y2: 0, stroke: 'cyan'});
kedu.appendChild(l);
});
};
setTime = () => {
var now = new Date();
var hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
min = now.getMinutes(),
sec = now.getSeconds(),
msec = now.getMilliseconds();
var hDeg = hr * 30 + (min * 6 / 12),
mDeg = min * 6 + (sec * 6 / 60),
sDeg = sec * 6 + (msec * 0.36 / 1000);
hHand.style.setProperty('--begin', hDeg + 'deg');
mHand.style.setProperty('--begin', mDeg + 'deg');
sHand.style.setProperty('--begin', sDeg + 'deg');
};
setDate = () => {
var sDate = new Date();
var sDateS = sDate.getSeconds() * 1000,
sDateMs = sDate.getMilliseconds();
tdate.textContent = `${sDate.getFullYear()}年${sDate.getMonth() + 1}月${sDate.getDate()}日`;
tday.textContent = `星期${'日一二三四五六'.substr(sDate.getDay(),1)}`;
setTimeout( () => {
setDate();
}, 60000 - sDateS - sDateMs);
};
mkScale();
setTime();
setDate();
</script>
<div style="left:-172px; width:460px; position:relative; top:-445px;">
<img src="https://cccimg.com/view.php/f0c33158b44b682a5247743fe976aef0.gif"/>
<div style="left:160px; width:460px; position:relative; top:55px;">
<img src="https://cccimg.com/view.php/b574f0b82ab9e960c3209b6f828825ab.gif"/>
<iframe width="7" height="4" frameborder="0" src="https://www.ixigua.com/iframe/7153180731613970958?autoplay=1" referrerpolicy="unsafe-url" allowfullscreen></iframe>
<div style="left:150px; width:460px; position:relative; top:295px;">
https://5b0988e595225.cdn.sohucs.com/images/20180105/436f028ffd6442c296a8623c47896ef7.gif 漂亮精致的时钟，欣赏点赞！早上好！ 梦景老师，评分点不动。 这个有意思，把黑黑的时钟加了个钟框，还有动态钟摆，非常漂亮{:4_199:} 秋思梦景的构思十分奇妙，唯一的问题是没法评分呢{:4_173:}
感谢秋思梦景的美好祝福，周六快乐{:4_187:} 还是头一次看到黑黑的时钟代码被这样使用，很赞{:4_187:} 最美好的祝福。谢谢啦！{:4_190:} 漂亮的花潮时钟{:4_199:} 感谢老师分享精彩制作，不能加分，心里给你加100分{:4_187:} 小辣椒 发表于 2024-11-16 15:13
感谢老师分享精彩制作，不能加分，心里给你加100分
问候老师好！感谢您欣鼓励和支持！但是不知什么原因遮住评分。{:5_108:} 小辣椒 发表于 2024-11-16 15:13
漂亮的花潮时钟
问候老师好！感谢您欣鼓励和支持！但是不知什么原因遮住评分。{:5_108:} 小辣椒 发表于 2024-11-16 15:13
漂亮的花潮时钟
问候老师好！感谢您欣鼓励和支持！但是不知什么原因遮住评分。{:5_108:} 樵歌 发表于 2024-11-16 12:59
最美好的祝福。谢谢啦！
问候老师好！感谢您欣鼓励和支持！但是不知什么原因遮住评分。{:5_108:} 红影 发表于 2024-11-16 10:52
还是头一次看到黑黑的时钟代码被这样使用，很赞
问候老师好！感谢您欣鼓励和支持！但是不知什么原因遮住评分。{:5_108:} 红影 发表于 2024-11-16 10:51
秋思梦景的构思十分奇妙，唯一的问题是没法评分呢
感谢秋思梦景的美好祝福，周六快乐
问候老师好！感谢您欣鼓励和支持！但是不知什么原因遮住评分。{:5_108:} 红影 发表于 2024-11-16 10:51
秋思梦景的构思十分奇妙，唯一的问题是没法评分呢
感谢秋思梦景的美好祝福，周六快乐
问候老师好！感谢您欣鼓励和支持！但是不知什么原因遮住评分。{:5_108:} 梦江南 发表于 2024-11-16 07:48
梦景老师，评分点不动。
问候老师好！感谢您欣鼓励和支持！但是不知什么原因遮住评分。{:5_108:} 梦江南 发表于 2024-11-16 07:47
漂亮精致的时钟，欣赏点赞！早上好！
问候老师好！感谢您欣鼓励和支持！但是不知什么原因遮住评分。{:5_108:} 夕阳黄昏 发表于 2024-11-16 07:33
问候老师好！感谢您欣鼓励和支持！但是不知什么原因遮住评分。{:5_108:}
页:
[1]
2