重发沙发挂钟可做背景图
本帖最后由 普陀申木 于 2024-11-15 15:52 编辑 <br /><br /><style>#papa {margin: 30px 0 30px calc(50% - 741px);
width: 1280px;
height: 720px;
background: url('https://pic.imgdb.cn/item/6724ca4bd29ded1a8c7e3ee5.jpg') no-repeat center/cover;
overflow: hidden;
z-index: 1;
position: relative;
}
#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: transparent; user-select: none; }
@keyframes turning { from { transform: rotate(var(--begin)); } to { transform: rotate(calc(360deg + var(--begin))); } }
.ipic { position: absolute; bottom: 0; transform: skew(-3deg);transform-origin: 0% 0%;}
.ipic:nth-of-type(1) { left: 708px; bottom: 255px; animation: skew1 3s infinite linear ;width: 400px; height: 410px;}
.stop .ipic:nth-of-type(1){animation-play-state: paused;}
@keyframes skew1 { 50%{ transform: skew(3deg); } }
</style>
<div id="papa">
<svg id="clock" width="1280" height="263" viewBox="-1272 -220 650 650">
<defs>
<linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
</linearGradient>
</defs>
<circle cx="0" cy="0" r="85" fill="transparent" stroke="" stroke-width="10" />
<g id="kedu">
<text font-size="14" fill=" " 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="">石英钟</tspan>
</text>
</g>
<line id="hHand" x1="0" y1="0" x2="0" y2="-65" stroke="Black " stroke-width="4" />
<line id="mHand" x1="0" y1="0" x2="0" y2="-75" stroke="Black " stroke-width="3" />
<line id="sHand" x1="0" y1="0" x2="0" y2="-85" stroke="Black " stroke-width="2" />
<circle cx="0" cy="0" r="6" fill="red" stroke="white" stroke-width="2" />
</svg>
<div id="testImg">
<img class="ipic" src="https://pic.imgdb.cn/item/6724ca4bd29ded1a8c7e3ef4.png" alt="" />
</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> 这挂钟还带着下面摆动的钟摆呢，真漂亮的制作，色彩跟背景十分相配{:4_187:} 这个时间是当前时间了，只是钟面有点小，无法现实日期了{:4_173:}
这个不是居中呢，需要再左调一些才好。{:4_204:} 很漂亮的挂钟。{:4_199:} 本贴已经微调好。有一个问题向红影老师讨教，就是我所发的文章，竖式代码文章，有的只能显示出一部分，还有的部分图片代码不能显示，总是不顺，而在外面各种测试的代码编辑器中都正常后。我才采用本编辑器的。这里是什么问题呢？你能解决吗
文章-彩云之南- 在草稿箱里不能发。 其实时钟的日期也可加上的只是在本文中隠去了。 画面加钟效果，漂亮的{:4_199:}
页:
[1]