沙发挂钟可做背景图片

普陀申木

普陀申木

梦江南

普陀申木 发表于 2024-11-2 08:18
#papa {margin:

        MARGIN-LEFT:100px;margin-top: 30px;

欣赏老师挂钟佳作。

普陀申木

&lt;style&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; #papa {margin: 30px 0 30px calc(50% - 641px);<br>&nbsp; &nbsp; &nbsp; &nbsp; width: 1280px;<br>&nbsp; &nbsp; &nbsp; &nbsp; height: 720px;<br>&nbsp; &nbsp; &nbsp; &nbsp; background: url('https://pic.imgdb.cn/item/6724ca4bd29ded1a8c7e3ee5.jpg') no-repeat center/cover;<br><br>&nbsp; &nbsp; &nbsp; &nbsp; overflow: hidden;<br>&nbsp; &nbsp; &nbsp; &nbsp; z-index: 1;<br>&nbsp; &nbsp; &nbsp; &nbsp; position: relative;<br>}<br><br>&nbsp; &nbsp; &nbsp; &nbsp; #hHand, #mHand, #sHand { animation: turning var(--dur) linear infinite; }<br>&nbsp; &nbsp; &nbsp; &nbsp; #hHand { --begin: 0deg; --dur: 216000s; }<br>&nbsp; &nbsp; &nbsp; &nbsp; #mHand { --begin: 0deg; --dur: 3600s; }<br>&nbsp; &nbsp; &nbsp; &nbsp; #sHand { --begin: 0deg; --dur: 60s; }<br>&nbsp; &nbsp; &nbsp; &nbsp; #kedu { font: normal 16px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; text-anchor: middle; dominant-baseline: middle; fill: transparent; user-select: none; }<br>&nbsp; &nbsp; &nbsp; &nbsp; @keyframes turning { from { transform: rotate(var(--begin)); } to { transform: rotate(calc(360deg + var(--begin))); } }<br>.ipic { position: absolute; bottom: 0; transform: skew(-3deg);transform-origin: 0% 0%;}<br>&nbsp; &nbsp; &nbsp; &nbsp; .ipic:nth-of-type(1) { left: 708px; bottom: 255px; animation: skew1 3s infinite linear ;width: 400px; height: 410px;}<br>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; .stop .ipic:nth-of-type(1){animation-play-state: paused;}<br>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; @keyframes skew1 { 50%{ transform: skew(3deg); } }<br>&nbsp; &nbsp; &nbsp; &nbsp; <br><br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;/style&gt;<br> <br>&lt;div id="papa"&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;svg id="clock" width="1280" height="263" viewBox="-1272 -220 650 650"&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;defs&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;linearGradient id="bg" x1="0" x2="1" y1="0" y2="1"&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/linearGradient&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/defs&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;circle cx="0" cy="0" r="85" fill="transparent" stroke="" stroke-width="10" /&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;g id="kedu"&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;text font-size="14" fill=" " text-anchor="middle"&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tspan id="tdate" x="5" y="-35"&gt;日期&lt;/tspan&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tspan id="tday" x="0" y="-15"&gt;星期&lt;/tspan&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tspan x="0" y="40" fill=""&gt;石英钟&lt;/tspan&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/text&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/g&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;line id="hHand" x1="0" y1="0" x2="0" y2="-65" stroke="Black " stroke-width="4" /&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;line id="mHand" x1="0" y1="0" x2="0" y2="-75" stroke="Black " stroke-width="3" /&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;line id="sHand" x1="0" y1="0" x2="0" y2="-85" stroke="Black " stroke-width="2" /&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;circle cx="0" cy="0" r="6" fill="red" stroke="white" stroke-width="2" /&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;/svg&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id="testImg"&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;img class="ipic" src="https://pic.imgdb.cn/item/6724ca4bd29ded1a8c7e3ef4.png" alt="" /&gt;<br><br><br>&lt;/div&gt;<br> <br>&lt;script&gt;<br>setAttr = (elm, objData) =&gt; {<br>&nbsp; &nbsp; &nbsp; &nbsp; for(var key in objData) {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elm.setAttribute(key, objData[key]);<br>&nbsp; &nbsp; &nbsp; &nbsp; }<br>};<br> <br>mkScale = (total=60) =&gt; {<br>&nbsp; &nbsp; &nbsp; &nbsp; var deg = 360 / total;<br>&nbsp; &nbsp; &nbsp; &nbsp; Array(total).fill('').forEach((l,k) =&gt; {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var w = -6;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(k % 5 === 0) {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var t = document.createElementNS('http://www.w3.org/2000/svg', 'text');<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttr(t, {transform: `rotate(${deg * k - 60} 0 0) translate(75) rotate(${-1 * (deg * k - 60)} 0 0)`});<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t.textContent = k / 5 + 1;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; kedu.appendChild(t);<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; w = -4;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; l = document.createElementNS('http://www.w3.org/2000/svg', 'line');<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttr(l, {transform: `rotate(${deg * k - 60} 0 0) translate(90)`, x1: 0, y1: 0, x2: w, y2: 0, stroke: 'cyan'});<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; kedu.appendChild(l);<br>&nbsp; &nbsp; &nbsp; &nbsp; });<br>};<br> <br>setTime = () =&gt; {<br>&nbsp; &nbsp; &nbsp; &nbsp; var now = new Date();<br>&nbsp; &nbsp; &nbsp; &nbsp; var hr = now.getHours() &gt; 12 ? now.getHours() - 12 : now.getHours(),<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; min = now.getMinutes(),<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sec = now.getSeconds(),<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; msec = now.getMilliseconds();<br>&nbsp; &nbsp; &nbsp; &nbsp; var hDeg = hr * 30 + (min * 6 / 12),<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mDeg = min * 6 + (sec * 6 / 60),<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sDeg = sec * 6 + (msec * 0.36 / 1000);<br>&nbsp; &nbsp; &nbsp; &nbsp; hHand.style.setProperty('--begin', hDeg + 'deg');<br>&nbsp; &nbsp; &nbsp; &nbsp; mHand.style.setProperty('--begin', mDeg + 'deg');<br>&nbsp; &nbsp; &nbsp; &nbsp; sHand.style.setProperty('--begin', sDeg + 'deg');<br>};<br> <br>setDate = () =&gt; {<br>&nbsp; &nbsp; &nbsp; &nbsp; var sDate = new Date();<br>&nbsp; &nbsp; &nbsp; &nbsp; var sDateS = sDate.getSeconds() * 1000,<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sDateMs = sDate.getMilliseconds();<br>&nbsp; &nbsp; &nbsp; &nbsp; tdate.textContent = `${sDate.getFullYear()}年${sDate.getMonth() + 1}月${sDate.getDate()}日`;<br>&nbsp; &nbsp; &nbsp; &nbsp; tday.textContent = `星期${'日一二三四五六'.substr(sDate.getDay(),1)}`;<br>&nbsp; &nbsp; &nbsp; &nbsp; setTimeout( () =&gt; {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setDate();<br>&nbsp; &nbsp; &nbsp; &nbsp; }, 60000 - sDateS - sDateMs);<br>};<br> <br>mkScale();<br>setTime();<br>setDate();<br>&lt;/script&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<br>

红影

漂亮的时钟背景。
这个的显示时间好像不对呢

小文

厉害，好漂亮的钟！喜欢

小辣椒

自己制作时钟，

小辣椒

时间代码是不是有错误，现在的时间不准了