论坛 › 欢乐水吧 › 光辉岁月（学习黑师《花潮完美时钟》代码效果）

南无月 发表于 2023-6-2 21:54

本帖最后由 南无月 于 2023-6-11 11:18 编辑 <br /><br /><style>
outer-box {
        margin: 0 0 0 calc(50% - 593px);
        position: relative;
        display: block;
        width: 1024px;
        height: 640px;
        background: url('https://s1.ax1x.com/2023/06/10/pCV9yvQ.md.jpg')no-repeat center / cover;
        z-index: 1;
        --state: paused;
}
css-doodle { position: absolute; }
</style>

<outer-box id="papa">
        <css-doodle grid="1x6" id="mplayer">
                :doodle {
                        @size: 100%;
                        box-shadow: 20px auto;
                        --ww: 300px;
                        --prog: 0;
                        --tt1: '00:00';
                        --tt2: '00:00';
                        --xplace: 65%;
                        --yplace: 92%;
                        --color: Coral;
                }
                position: absolute;
                @nth(1) {
                        @size: var(--ww) 2px;
                        @place: var(--xplace) var(--yplace);
                        background: silver;
                        :before, :after { content: ''; }
                        :before {
                                position: absolute;
                                left: 0;
                                width: var(--prog);
                                height: 100%;
                                background: var(--color);
                        }
                        :after {
                                width: 80%;
                                height: 10px;
                                cursor: pointer;
                        }
                }
                @nth(2) {
                        @size: var(--ww) 20px;
                        @place: var(--xplace) calc(var(--yplace) - 20px);
                        :before, :after{
                                position: absolute;
                                width: 80%;
                                height: 100%;
                                color: var(--color);
                        }
                        :before { content: var(--tt1); }
                        :after { content: var(--tt2); text-align: right; }
                }
                @nth(3) {
                        @size: 60px;
                        @place: var(--xplace) calc(var(--yplace) - 36px);
                        cursor: pointer;
                        z-index: 10;
                        animation: rot 6s infinite linear var(--state);
                        :after {
                                content: '';
                                @size: inherit;
                                clip-path: @shape( fill: evenodd;
                                        points: 300;
                                        scale: .45;
                                        x: cos(2t) + cos(π - 7t);
                                        y: sin(2t) + sin(7t);
                                );
                                background: var(--color);
                        }
                }
                @match(i ≥ 4) {
                        @size: 300px 300px;
                        @place: 520px 304px;
                        background: url('https://img.soogif.com/eec7c8e4bca44deba45771d76e759ef0.gif');
                        offset-path: path('M80 100 a240 160 0 1 0 480 0 a240 160 0 1 0 -480 0z');
                        animation: fly 18s calc((@size - @i) * -6.5s) infinite linear var(--state);
                }
                @keyframes rot { to { transform: rotate(360deg); } }
                @keyframes fly { to { offset-distance: 100%; }}
        </css-doodle>
        <css-doodle grid="1" id="lrc">
                :doodle {
                        @size: auto 3em;
                        left: 65%;
                        bottom: 2%;
                        transform: translate(-50%);
                        --geci: 'HUACHAO';
                        --motion: cover2;
                        --tt: 1s;
                }
                display: grid;
                place-items: center start;
                :before, :after {
                        content: var(--geci);
                        width: fit-content;
                        height: fit-content;
                        font: bold 1.4em Sans-serif;
                        color: #ccc;
                        text-shadow: 1px 1px 2px #000;
                        white-space: pre;
                }
                :after {
                        position: absolute;
                        white-space: pre;
                        width: 0;
                        color:         SeaGreen;
                        overflow: hidden;
                        animation: var(--motion) var(--tt) linear forwards var(--state);
                }
                @keyframes cover1 { from { width: 0; } to { width: 100%; } }
                @keyframes cover2 { from { width: 0; } to { width: 100%; } }
        </css-doodle>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=317416" autoplay="autoplay" loop="loop"></audio>
</outer-box>

<script>
(function(){
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
        let mKey = 0, mFlag = true, slip = 0;
        let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
        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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
        let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}mplayer.style.setProperty('--prog', 100*aud.currentTime/aud.duration + '%');mplayer.style.setProperty('--tt1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--tt2', `'${toMin(aud.duration)}'`);});
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        aud.addEventListener('seeked', () => calcKey());
        window.onload = () => {
                let btns = mplayer.shadowRoot.querySelectorAll('cell');
                        let ww = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--ww'));
                btns.onclick = () => aud.paused ? aud.play() : aud.pause();
                btns.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / ww;
        }
})();
</script>

马黑黑 发表于 2023-6-2 22:34

南无月 发表于 2023-6-2 21:53
优秀的花潮完美时钟，颜值的确很高。。喜欢。。

{:4_190:}

樵歌 发表于 2023-6-3 07:09

南无月 发表于 2023-6-2 21:54
感谢樵管鼓励支持

不客气哈。{:4_190:}

红影 发表于 2023-6-3 15:57

南无月 发表于 2023-6-2 21:51
试着放看看居然可以，意外之喜

这个试验非常棒，月儿厉害{:4_199:}

红影 发表于 2023-6-3 16:00

南无月 发表于 2023-6-2 21:52
近来贴子有玄学的味道，如果好看都是凑巧

玄幻的好，更把人带到奇妙的氛围里了{:4_187:}

梦缘 发表于 2023-6-3 20:42

好大的钟，精彩分享！{:4_187:}

南无月 发表于 2023-6-3 21:17

红影 发表于 2023-6-3 16:00
玄幻的好，更把人带到奇妙的氛围里了

花潮氛围好，做贴子也顺{:4_173:}

南无月 发表于 2023-6-3 21:18

梦缘 发表于 2023-6-3 20:42
好大的钟，精彩分享！

谢谢梦缘支持，花潮专用时钟，必须最显眼{:4_187:}

红影 发表于 2023-6-3 22:41

南无月 发表于 2023-6-3 21:17
花潮氛围好，做贴子也顺

月儿脑子好，做帖子也好{:4_187:}

马黑黑 发表于 2023-6-11 11:19

21楼的代码

<style>
outer-box {
        margin: 0 0 0 calc(50% - 593px);
        position: relative;
        display: block;
        width: 1024px;
        height: 640px;
        background: url('https://s1.ax1x.com/2023/06/10/pCV9yvQ.md.jpg')no-repeat center / cover;
        z-index: 1;
        --state: paused;
}
css-doodle { position: absolute; }
</style>

<outer-box id="papa">
        <css-doodle grid="1x6" id="mplayer">
                :doodle {
                        @size: 100%;
                        box-shadow: 20px auto;
                        --ww: 300px;
                        --prog: 0;
                        --tt1: '00:00';
                        --tt2: '00:00';
                        --xplace: 65%;
                        --yplace: 92%;
                        --color: Coral;
                }
                position: absolute;
                @nth(1) {
                        @size: var(--ww) 2px;
                        @place: var(--xplace) var(--yplace);
                        background: silver;
                        :before, :after { content: ''; }
                        :before {
                                position: absolute;
                                left: 0;
                                width: var(--prog);
                                height: 100%;
                                background: var(--color);
                        }
                        :after {
                                width: 80%;
                                height: 10px;
                                cursor: pointer;
                        }
                }
                @nth(2) {
                        @size: var(--ww) 20px;
                        @place: var(--xplace) calc(var(--yplace) - 20px);
                        :before, :after{
                                position: absolute;
                                width: 80%;
                                height: 100%;
                                color: var(--color);
                        }
                        :before { content: var(--tt1); }
                        :after { content: var(--tt2); text-align: right; }
                }
                @nth(3) {
                        @size: 60px;
                        @place: var(--xplace) calc(var(--yplace) - 36px);
                        cursor: pointer;
                        z-index: 10;
                        animation: rot 6s infinite linear var(--state);
                        :after {
                                content: '';
                                @size: inherit;
                                clip-path: @shape( fill: evenodd;
                                        points: 300;
                                        scale: .45;
                                        x: cos(2t) + cos(π - 7t);
                                        y: sin(2t) + sin(7t);
                                );
                                background: var(--color);
                        }
                }
                @match(i ≥ 4) {
                        @size: 300px 300px;
                        @place: 520px 304px;
                        background: url('https://img.soogif.com/eec7c8e4bca44deba45771d76e759ef0.gif');
                        offset-path: path('M80 100 a240 160 0 1 0 480 0 a240 160 0 1 0 -480 0z');
                        animation: fly 18s calc((@size - @i) * -6.5s) infinite linear var(--state);
                }
                @keyframes rot { to { transform: rotate(360deg); } }
                @keyframes fly { to { offset-distance: 100%; }}
        </css-doodle>
        <css-doodle grid="1" id="lrc">
                :doodle {
                        @size: auto 3em;
                        left: 65%;
                        bottom: 2%;
                        transform: translate(-50%);
                        --geci: 'HUACHAO';
                        --motion: cover2;
                        --tt: 1s;
                }
                display: grid;
                place-items: center start;
                :before, :after {
                        content: var(--geci);
                        width: fit-content;
                        height: fit-content;
                        font: bold 1.4em Sans-serif;
                        color: #ccc;
                        text-shadow: 1px 1px 2px #000;
                        white-space: pre;
                }
                :after {
                        position: absolute;
                        white-space: pre;
                        width: 0;
                        color:         SeaGreen;
                        overflow: hidden;
                        animation: var(--motion) var(--tt) linear forwards var(--state);
                }
                @keyframes cover1 { from { width: 0; } to { width: 100%; } }
                @keyframes cover2 { from { width: 0; } to { width: 100%; } }
        </css-doodle>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=317416" autoplay="autoplay" loop="loop"></audio>
</outer-box>

<script>
(function(){
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
        let mKey = 0, mFlag = true, slip = 0;
        let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
        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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
        let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}mplayer.style.setProperty('--prog', 100*aud.currentTime/aud.duration + '%');mplayer.style.setProperty('--tt1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--tt2', `'${toMin(aud.duration)}'`);});
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        aud.addEventListener('seeked', () => calcKey());
        window.onload = () => {
                let btns = mplayer.shadowRoot.querySelectorAll('cell');
                        let ww = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--ww'));
                btns.onclick = () => aud.paused ? aud.play() : aud.pause();
                btns.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / ww;
        }
})();
</script>

马黑黑 发表于 2023-6-11 11:24

但是，播放器与歌词靠的太近，进度条的交互被歌词影响到了，建议拉开足够距离。

代码修改前，原帖的问题：蝴蝶单元格设置背景图片使用了ubb代码，HTML帖子最好不要用ubb代码，就用HTML代码。

background: url('图片地址');√

background: ［url］图片地址［url］×

南无月 发表于 2023-6-11 11:45

马黑黑 发表于 2023-6-11 11:24
但是，播放器与歌词靠的太近，进度条的交互被歌词影响到了，建议拉开足够距离。

代码修改前，原帖的问题 ...

{:4_173:}歌词我改，改到上方去

南无月 发表于 2023-6-11 11:46

马黑黑 发表于 2023-6-11 11:24
但是，播放器与歌词靠的太近，进度条的交互被歌词影响到了，建议拉开足够距离。

代码修改前，原帖的问题 ...

神奇了，我抄的作业图片地址怎么会变了呢。。。{:4_170:}收到，不谢了哈。。

马黑黑 发表于 2023-6-11 11:46

南无月 发表于 2023-6-11 11:45
歌词我改，改到上方去

歌词文本大小是不是太小了点

马黑黑 发表于 2023-6-11 11:49

南无月 发表于 2023-6-11 11:46
神奇了，我抄的作业图片地址怎么会变了呢。。。收到，不谢了哈。。

论坛有个机制：有网页地址，它就会自动补上ubb代码。

避免这个错误，需要用引号将网页地址包裹起来：

background: url('网页地址');

南无月 发表于 2023-6-11 11:51

马黑黑 发表于 2023-6-11 11:46
歌词文本大小是不是太小了点

{:4_170:}当时整到下方觉得占地方，就改小了，现在改到2，你看可以不

南无月 发表于 2023-6-11 11:53

马黑黑 发表于 2023-6-11 11:49
论坛有个机制：有网页地址，它就会自动补上ubb代码。

避免这个错误，需要用引号将网页地址包裹起来：
...

我把小引号整丢了，所以论坛自动补，然后就不显示了？
代码真严格，还真是一个小符号都错不得。。{:4_170:}

马黑黑 发表于 2023-6-11 12:30

南无月 发表于 2023-6-11 11:53
我把小引号整丢了，所以论坛自动补，然后就不显示了？
代码真严格，还真是一个小符号都错不得。。{:4_17 ...

不同场合有不同的特性

马黑黑 发表于 2023-6-11 12:30

南无月 发表于 2023-6-11 11:51
当时整到下方觉得占地方，就改小了，现在改到2，你看可以不

没有放大镜的一般都要用到2

南无月 发表于 2023-6-11 18:57

马黑黑 发表于 2023-6-11 12:30
不同场合有不同的特性

发贴环境幸好差别不是很大

查看完整版本: 光辉岁月（学习黑师《花潮完美时钟》代码效果）