红颜旧

马黑黑 · 发表于 2023-3-17 07:37

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-3-17 19:31 编辑

00:00 00:00

马黑黑 · 发表于 2023-3-17 07:43

帖子代码

<style>
#papa {
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: lightblue url('https://638183.freep.cn/638183/t23/1/hyjq.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
display: grid;
place-items: center;
z-index: 1;
}
#clock {
position: absolute;
left: 45px;
top: 45px;
width: 160px;
height: 160px;
background: tan;
box-shadow: 0 0 40px 20px hsla(0,0%,0%,.9) inset, 0 0 80px 40px hsla(120,100%,50%,.5) inset;
filter: drop-shadow(-5px -5px 30px black);
border-radius: 50%;
border: 8px solid hsla(120,75%,40%,.6);
display: grid;
place-items: center;
cursor: pointer;
opacity: .8;
--state: paused;
}
#clock::before, #clock::after {
position: absolute;
content: '';
width: 6px;
height: 78px;
background: hsla(120,100%,60%,.45);
}
#clock::before {
--deg: 15deg; --time: .4s;
top: 50%;
background: hsla(100,100%,50%,.95);
transform-origin: 50% 0;
transform: rotate(-15deg);
animation: rot var(--time) infinite alternate linear var(--state);
}
#clock::after {
--deg: 360deg;
bottom: 50%;
transform-origin: 50% 100%;
transform: rotate(0deg);
animation: rot var(--time) infinite linear var(--state);
}
#clock > span {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background: hsla(100,100%,50%,.9);
z-index: 2;
}
#clock > span:nth-of-type(2) {
top: -7px;
width: 6px;
height: 6px;
}
.mypic {
position: absolute;
right:160px;
filter: blur(2px) opacity(.8);
}
@keyframes rot { to {transform: rotate(var(--deg)); } }
</style>
<div id="papa">
<div id="clock">00:00 00:00<span></span><span></span></div>
<img class="mypic" src="https://638183.freep.cn/638183/t23/webp/insect.webp" alt="" />
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=35847622" 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;};
aud.addEventListener('play', () => clock.style.setProperty('--state', 'running'));
aud.addEventListener('pause', () => clock.style.setProperty('--state','paused'));
clock.addEventListener('click', () => aud.paused ? (aud.play(), clock.style.setProperty('--state','running')) : (aud.pause(), clock.style.setProperty('--state','paused')));
aud.addEventListener('timeupdate', () => clock.innerHTML = toMin(aud.currentTime) + ' ' + toMin(aud.duration) + '<span></span><span></span>');
aud.addEventListener('canplay', () => clock.style.setProperty('--time', aud.duration + 's'));
</script>

复制代码

马黑黑 · 发表于 2023-3-17 07:47

03行：

margin: 80px 0 0 calc(50% - 593px);

这是论坛专用居中语句（之一）。在独立环境，比如本地测试、博客转发，该句可改为：

margin: 20px auto;

或：

margin: auto;

马黑黑 · 发表于 2023-3-17 08:36

之前我们做过由CSS关键帧动画驱动的时钟，它的特点是运行平滑。和按秒一点一点驱动指针相比，CSS关键帧动画的运行不需要停顿。这种区别类似于时钟中机械驱动与电子驱动的运行差异。

用到音频控制，技巧是运行进度指示的 animation 属性必须配套音频的 loop 播放，用上 infinite 属性值。