论坛 › 欢乐水吧 › 鹰（致队长）

马黑黑 发表于 2023-6-10 11:26

鹰（致队长）

<style>
outer-box {
        margin: 0 0 0 calc(50% - 531px);
        position: relative;
        display: block;
        width: 900px;
        height: 598px;
        background: url('https://638183.freep.cn/638183/t23/2/dadi.jpg');
        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: 50%;
                        --yplace: 98%;
                        --color: snow;
                }
                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: 100%;
                                height: 10px;
                                cursor: pointer;
                        }
                }
                @nth(2) {
                        @size: var(--ww) 20px;
                        @place: var(--xplace) calc(var(--yplace) - 20px);
                        :before, :after{
                                position: absolute;
                                width: 100%;
                                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;
                        animation: rot 6s infinite linear var(--state);
                        :after {
                                content: '';
                                @size: inherit;
                                @shape: clover 4;
                                background: var(--color);
                        }
                }
                @match(i ≥ 4) {
                        @size: 100px 88px;
                        @place: 50px 44px;
                        background: url('https://638183.freep.cn/638183/t22/gif/ying1.gif');
                        offset-path: path('M50 44 Q500 300 900 44');
                        offset-distance: 0%;
                        animation: fly 10s calc((@size - @i) * -2.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: 50%;
                        top: 5%;
                        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 2.4em Sans-serif;
                        color: #ccc;
                        text-shadow: 1px 1px 2px #000;
                        white-space: pre;
                }
                :after {
                        position: absolute;
                        white-space: pre;
                        width: 0;
                        color: red;
                        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=1377467857" 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-10 11:26

帖子代码
<style>
outer-box {
        margin: 0 0 0 calc(50% - 531px);
        position: relative;
        display: block;
        width: 900px;
        height: 598px;
        background: url('https://638183.freep.cn/638183/t23/2/dadi.jpg');
        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: 50%;
                        --yplace: 98%;
                        --color: snow;
                }
                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: 100%;
                                height: 10px;
                                cursor: pointer;
                        }
                }
                @nth(2) {
                        @size: var(--ww) 20px;
                        @place: var(--xplace) calc(var(--yplace) - 20px);
                        :before, :after{
                                position: absolute;
                                width: 100%;
                                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;
                        animation: rot 6s infinite linear var(--state);
                        :after {
                                content: '';
                                @size: inherit;
                                @shape: clover 4;
                                background: var(--color);
                        }
                }
                @match(i ≥ 4) {
                        @size: 100px 88px;
                        @place: 50px 44px;
                        background: url('https://638183.freep.cn/638183/t22/gif/ying1.gif');
                        offset-path: path('M50 44 Q500 300 900 44');
                        offset-distance: 0%;
                        animation: fly 10s calc((@size - @i) * -2.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: 50%;
                        top: 5%;
                        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 2.4em Sans-serif;
                        color: #ccc;
                        text-shadow: 1px 1px 2px #000;
                        white-space: pre;
                }
                :after {
                        position: absolute;
                        white-space: pre;
                        width: 0;
                        color: red;
                        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=1377467857" 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-10 11:30

队长喜欢的鹰，黑黑一送就送3只呢。队长快来收礼@加林森{:4_187:}

马黑黑 发表于 2023-6-10 11:36

红影 发表于 2023-6-10 11:30
队长喜欢的鹰，黑黑一送就送3只呢。队长快来收礼@加林森

{:4_204:}

红影 发表于 2023-6-10 11:37

这个加了歌词呢，这首歌的歌词还挺好的，很有意义{:4_187:}

醉美水芙蓉 发表于 2023-6-10 11:44

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

红影 发表于 2023-6-10 11:37
这个加了歌词呢，这首歌的歌词还挺好的，很有意义

{:4_181:}

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

醉美水芙蓉 发表于 2023-6-10 11:44
欣赏老师的精彩！

感谢支持

红影 发表于 2023-6-10 13:49

马黑黑 发表于 2023-6-10 11:36


问好黑黑，休息天快乐{:4_187:}

上海朝阳 发表于 2023-6-10 16:07

雄鹰翱翔

梦油 发表于 2023-6-10 17:19

祝队长早日康复！

樵歌 发表于 2023-6-10 19:00

哇塞，这雄鹰好霸道的样纸。真神奇。{:4_178:}

樵歌 发表于 2023-6-10 19:00

祝队长早日康复！

南无月 发表于 2023-6-10 21:00

有歌词的大地~~对初学者十分友好~~
看老师的雄鹰万里长空任翱翔~~

焱鑫磊 发表于 2023-6-10 22:03

欣赏！棒棒哒！{:4_187:}

马黑黑 发表于 2023-6-10 22:28

焱鑫磊 发表于 2023-6-10 22:03
欣赏！棒棒哒！

{:4_190:}

马黑黑 发表于 2023-6-10 22:35

红影 发表于 2023-6-10 13:49
问好黑黑，休息天快乐

加班

马黑黑 发表于 2023-6-10 22:51

上海朝阳 发表于 2023-6-10 16:07
雄鹰翱翔

晚上好

马黑黑 发表于 2023-6-10 22:51

南无月 发表于 2023-6-10 21:00
有歌词的大地~~对初学者十分友好~~
看老师的雄鹰万里长空任翱翔~~

代码脉络还是比较清晰的吧

马黑黑 发表于 2023-6-10 22:52

樵歌 发表于 2023-6-10 19:00
祝队长早日康复！

同祝

查看完整版本: 鹰（致队长）