论坛 › 音乐沙龙 › 红颜旧

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

红颜旧

本帖最后由 马黑黑 于 2023-3-17 19:31 编辑 <br /><br /><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 &nbsp; &nbsp; 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>
(function() {
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) + ' &nbsp; &nbsp; ' +toMin(aud.duration) + '<span></span><span></span>');
aud.addEventListener('canplay', () => clock.style.setProperty('--time', aud.duration + 's'));
})();
</script>

马黑黑 发表于 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 属性值。

红影 发表于 2023-3-17 09:09

这个时钟颜色又做了调整，和图中人物的服饰相协调。黑黑又带来新的玩法{:4_187:}

红影 发表于 2023-3-17 09:12

马黑黑 发表于 2023-3-17 07:47
03行：

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


这个细节的解说很有用{:4_187:}

红影 发表于 2023-3-17 09:21

惊蛰里的小瓢虫用在这里了，有趣{:4_173:}

樵歌 发表于 2023-3-17 10:39

心事重重的样纸{:4_189:}

马黑黑 发表于 2023-3-17 11:55

樵歌 发表于 2023-3-17 10:39
心事重重的样纸

旧了嘛

马黑黑 发表于 2023-3-17 11:56

红影 发表于 2023-3-17 09:09
这个时钟颜色又做了调整，和图中人物的服饰相协调。黑黑又带来新的玩法

旧的旧的，红颜旧

马黑黑 发表于 2023-3-17 11:56

红影 发表于 2023-3-17 09:21
惊蛰里的小瓢虫用在这里了，有趣

寄居在此{:4_170:}

马黑黑 发表于 2023-3-17 11:56

红影 发表于 2023-3-17 09:12
这个细节的解说很有用

对的

小辣椒 发表于 2023-3-17 13:06

黑黑速度的，这个修改比前面的完善了{:4_199:}

整体效果更加美了 钟的阴影做浅背景会有点明显了

马黑黑 发表于 2023-3-17 13:09

小辣椒 发表于 2023-3-17 13:06
黑黑速度的，这个修改比前面的完善了

整体效果更加美了 钟的阴影做浅背景会有点明显了

感谢精美点评

小辣椒 发表于 2023-3-17 13:17

马黑黑 发表于 2023-3-17 13:09
感谢精美点评

{:4_203:}

咋算精美了

雨中悄然 发表于 2023-3-17 18:01

马黑黑 发表于 2023-3-17 11:56
旧的旧的，红颜旧

旧的简单，发张新的{:4_170:}

雨中悄然 发表于 2023-3-17 18:01

发现小播是透明的

马黑黑 发表于 2023-3-17 18:57

雨中悄然 发表于 2023-3-17 18:01
发现小播是透明的

一点点透明：opacity属性，以及hsla颜色中的alpha通道

马黑黑 发表于 2023-3-17 18:57

雨中悄然 发表于 2023-3-17 18:01
旧的简单，发张新的

{:4_203:}

马黑黑 发表于 2023-3-17 19:00

小辣椒 发表于 2023-3-17 13:17
咋算精美了

用词精美{:5_106:}

查看完整版本: 红颜旧