【感谢千羽】和花花在一起（套用黑黑《羽》黑氏时钟小播效果）
本帖最后由 雨中悄然 于 2023-3-15 17:50 编辑 <br /><br /><style>#papa { margin: -60px 0 0 calc(50% - 750px); width: 1398px; height: 720px; background: lightblue url('https://s1.ax1x.com/2023/03/14/pplhzwD.jpg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; z-index: 1; }
#clock { --ww: 120px; --state: paused; --deg: 0; --deg: 0s; position: absolute; left: 70%; top: 16%; width: var(--ww); height: var(--ww); color: plum; text-shadow: 1px 1px 2px #000; border: 6px solid PaleVioletred; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
#clock::before, #clock::after { position: absolute; content: ''; width: 6px; height: calc(var(--ww) / 2 - 2px); border-radius: 50%; }
#clock::before { background: hsla(120,80%,90%,.75); bottom: 50%; transform-origin: 50% 100%; transform: rotate(var(--deg)); }
#clock::after { top: 50%; background: hsla(220,100%,50%,.5); transform-origin: 100% 0; animation: swing .3s infinite alternate linear var(--state); }
@keyframes swing { from { transform: rotate(15deg); } to {transform: rotate(-15deg); } }
</style>
<div id="papa">
<div id="clock">00:00</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=34614876" autoplay loop></audio>
</div>
<script>
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
let mState = () => clock.style.setProperty('--state', aud.paused ? 'pasued' : 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
clock.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('timeupdate', () => {
let deg = 360*aud.currentTime / aud.duration;
clock.style.setProperty('--deg', deg +'deg');
clock.innerText = toMin(aud.currentTime) + ' - ' +toMin(aud.duration);
});
</script> @千羽 用上了你给的高光素材，感谢你给的教程。
PS正在学习中，不要嫌弃，以后做更好的送给你 @马黑黑 交一份套用作业 雨中悄然 发表于 2023-3-14 18:02
@马黑黑 交一份套用作业
100√ 马黑黑 发表于 2023-3-14 18:05
100√
{:4_187:}慷慨 这个有趣，真的像挂在墙上的钟表呢。画面清爽，很漂亮的制作{:4_199:} 雨中悄然 发表于 2023-3-14 18:10
慷慨
大方 帖子横向不居中。原始父框CSS代码：
#papa { margin: -60px 0 0 calc(50% - 699px); width: 1398px; height: 720px; ……
应改为：
#papa { margin: -60px 0 0 calc(50% - 618px); width: 1398px; height: 720px;……
618 怎么得来？公式是酱紫：
帖子宽度/2 - 81 → 1398/2-81=618
81是个重要的基于论坛的偏移量参考数据。论坛程序开发者中有不少是退伍军人，所以留的偏移量是 81 px 悄然有PS基础，高光素用得挺好的，{:4_187:} 那播放器挺有趣的，画面好美{:4_187:} 雨中悄然 发表于 2023-3-14 18:02
@千羽 用上了你给的高光素材，感谢你给的教程。
PS正在学习中，不要嫌弃，以后做更好的送给你
悄然不用客气啊，分享是应该的{:4_185:} 悄然做图辛苦了，谢谢你给的漂亮礼物{:4_185:}
给你添一点点赞，也算俺的微薄赞助！
悄然这个图意不错，设计的模糊背景很形象，这个钟的位置效果很好{:4_199:} 这个钟的播放器我也是喜欢的{:4_173:} 红影 发表于 2023-3-14 18:30
这个有趣，真的像挂在墙上的钟表呢。画面清爽，很漂亮的制作
{:4_187:}谢影宝肯定 马黑黑 发表于 2023-3-14 18:57
大方
{:4_199:}大大方方是正理 马黑黑 发表于 2023-3-14 19:12
帖子横向不居中。原始父框CSS代码：
#papa { margin: -60px 0 0 calc(50% - 699px); width: 1398px; hei ...
我改了618，刚好左对齐，图就偏右了。现在这个电脑看是正的。