冰心 发表于 2023-7-22 21:44

【伤心太平洋】

<style>
#papa {
      margin: 80px 0 0 calc(50% - 560px);
      width: 1024px;
      height: 640px;
      background: lightblue url('https://img.wyc520.com.cn/data/attachment/forum/202307/02/191010jrrnvr7qrm1rp0mi.jpg') no-repeat center / cover;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      z-index: 1; overflow: hidden; display: grid; place-items: center;
           --state: paused;   
}
.mybox {
        position: absolute;
        left: 580px;
        top: 40px;
        width: 1px;
        height: 1px;
        background: rebeccapurple url('https://pic.imgdb.cn/item/648e55401ddac507ccffc4f1.jpg') no-repeat center / cover;
        border-radius: 50%;
        clip-path: polygon(
                0 0, 100% 0, 100% 100%, 50% 100%, 50% 95%, 67% 67%, 95% 50%,
      67% 33%, 50% 5%, 33% 33%, 5% 50%, 33% 67%, 50% 95%, 50% 100%, 0 100%
        );
animation: move 12s infinite linear var(--state);
}
#pic {
        position: absolute;
        left: 2594px;
        top:56px;
        width: 1px;
        height: 1px;
        opacity: .85;
        border-radius: 50%;
}
@keyframes move { to { transform: rotate(360deg); } }
@keyframes rot2 { from { transform: rotate(-15deg) scale(1); } to { transform: rotate(15deg) scale(1.5); } }
.tit { position: absolute; left: 50px; top:10px; display: grid;place-items: center; font: bold 2.8em '楷体',serif; color: SandyBrown; text-shadow: 1px 1px 2px tan;writing-mode: vertical-rl; }
.vid { position: absolute; width: 1024px; height: 695px; top: -55px;object-fit: cover; opacity: .38; clip-path: circle(100% at bottom) ;mix-blend-mode: screen;}
</style>
<div id="papa">
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/46/5b438926d8d48.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<img id="pic" src="https://img.wyc520.com.cn/data/attachment/forum/202307/02/192622q8ry64ydd2kxllfb.png" alt="" />
<div class="mybox"></div>
<css-doodle grid="4x1" id="mplayer">
        :doodle {
                @size: 1024px 640px;
                display: block;
                opacity: .95;
                position: absolute;
                z-index: 1;       
                --geci: 'HUACHAO';
                --motion: cover2;
                --ww: 300px;
                --prog: 0;
                --tt: 1s;
                --tt1: '00:00';
                --tt2: '00:00';
                --xplace: 69%;
                --yplace: 94%;
                --color: Gold;
                --state: paused;
        }
        position: absolute;
        @nth(1) { /* 歌词 */
                @size: auto 3em;
                @place: 69% 76%;
                transform: translate(-50%);
                display: grid;
                place-items: center start;
                :before, :after {
                        content: var(--geci);
                        width: fit-content;
                        height: fit-content;
                        font: bold 1.8em Sans-serif;
                        color: #ccc;
                        text-shadow: 1px 1px 2px #000;
                        white-space: pre;
                }
                :after {
                        position: absolute;
                        white-space: pre;
                        width: 0;
                        color: Gold;
                        overflow: hidden;
                        animation: var(--motion) var(--tt) linear forwards var(--state);
                }
        }
        @nth(2) { /* 进度条 */
                @size: var(--ww) 2px;
                @place: var(--xplace) calc(var(--yplace) - 10px);
                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(3) { /* 按钮 */
                @size: 60px;
                @place: var(--xplace) calc(var(--yplace) - 52px);
                cursor: pointer;
                animation: rot 6s infinite linear var(--state);
                :after {
                        content: '';
                        @size: inherit;
                        @shape: clover 4;
                        background-color: Navy;
                        background-image: radial-gradient(red, Yellow, green);
                }
        }
        @nth(4) { /* 播放时间 */
                @size: var(--ww) 20px;
                @place: var(--xplace) calc(var(--yplace) - 30px);
                :before, :after{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        color: var(--color);
                }
                :before { content: var(--tt1); }
                :after { content: var(--tt2); text-align: right; }
        }
        @keyframes cover1 { from { width: 0; } to { width: 100%; } }
        @keyframes cover2 { from { width: 0; } to { width: 100%; } }
        @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
</div>

<audio id="aud" src="https://www.joy127.com/url/105753.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
(function(){
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
let vid = document.querySelector('.vid');
        let mKey = 0, mFlag = true, slip = 0.6;
        let lrcAr = [
        ['1.00', ' 歌曲《伤心太平洋》',8.55],
['10.00', ' 演唱 :冰心',9.50],
['20.00', ' 编辑 : 三月的阳光',5.98],
['26.29', ' 离开真的残酷吗',2.29],
['28.70', ' 或者温柔才是可耻的',3.02],
['31.88', ' 或者孤独的人无所谓',3.07],
['35.12', ' 无日无夜无条件',3.76],
['39.08', ' 前面真的危险吗',2.31],
['41.51', ' 或者背叛才是体贴的',3.00],
['44.67', ' 或者逃避比较容易吧',3.04],
['47.87', ' 风言风语风吹沙',3.42],
['51.47', ' 往前一步是黄昏',3.08],
['54.72', ' 退后一步是人生',2.99],
['57.86', ' 风不平浪不静',1.58],
['59.52', ' 心还不安稳',1.54],
['61.13', ' 一个岛锁住一个人',3.54],
['64.86', '',1.05],
['65.96', ' 我等的船还不来',2.98],
['69.09', ' 我等的人还不明白',3.10],
['72.36', ' 寂寞默默沉没沉入海',3.03],
['75.54', ' 未来不在我还在',3.05],
['78.75', ' 如果潮去心也去',3.08],
['81.99', ' 如果潮来你还不来',3.02],
['85.17', ' 浮浮沉沉 往事浮上来',3.00],
['88.33', ' 回忆回来 你已不在',3.78],
['92.31', '',0.44],
['92.78', ' 一波还未平息',1.56],
['94.41', ' 一波又来侵袭',1.84],
['96.35', ' 茫茫人海***',2.73],
['99.23', ' 一波还来不及',1.52],
['100.83', ' 一波早就过去',1.86],
['102.78', ' 一生一世如梦初醒',3.07],
['106.02', ' 深深太平洋底深深伤心',5.76],
['112.09', '',12.93],
['125.69', ' 离开真的残酷吗',2.29],
['128.10', ' 或者温柔才是可耻的',3.05],
['131.31', ' 或者孤独的人无所谓',3.06],
['134.53', ' 无日无夜无条件',3.05],
['137.75', ' 往前一步是黄昏',3.40],
['141.33', ' 退后一步是人生',3.04],
['144.53', ' 风不平浪不静',1.50],
['146.11', ' 心还不安稳',1.51],
['147.70', ' 一个岛锁住一个人',3.39],
['151.27', '',1.16],
['152.49', ' 我等的船还不来',3.07],
['155.72', ' 我等的人还不明白',3.03],
['158.91', ' 寂寞默默沉没沉入海',3.04],
['162.11', ' 回忆回来 你已不在',3.83],
['166.14', '',0.39],
['166.55', ' 一波还未平息',1.53],
['168.16', ' 一波又来侵袭',1.88],
['170.13', ' 茫茫人海***',2.72],
['173.00', ' 一波还来不及',1.50],
['174.58', ' 一波早就过去',1.89],
['176.57', ' 一生一世如梦初醒',3.02],
['179.75', ' 深深太平洋底深深伤心',5.38],
['185.41', '',24.75],
['211.46', ' 一波还未平息',3.04],
['214.66', ' 一波又来侵袭',3.10],
['217.92', ' 一波还来不及',3.03],
['221.11', ' 一波早就过去',3.33],
['224.62', ' 深深太平洋底深深伤心',6.13],
['231.07', ' 深深太平洋底深深伤心',5.80],
['237.17', '谢谢欣赏',4.5]
];
        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 = () => aud.paused ? (mplayer.style.setProperty('--state', 'paused'),papa.style.setProperty('--state', 'paused'), vid.pause() ) : (mplayer.style.setProperty('--state','running'),papa.style.setProperty('--state', 'running'), vid.play());
        let showLrc = (time) => {mplayer.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');mplayer.style.setProperty('--geci', '"' + lrcAr + '"');mplayer.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 = (e) => aud.currentTime = e.offsetX * aud.duration / ww;
                btns.onclick = () => aud.paused ? aud.play() : aud.pause();
        }
        let outstr = '伤心太平洋 冰心', num = 0;
        Array.from({length: outstr.length}).forEach((item,key) => {
                item = document.createElement('span');
                item.className = 'tit';
                item.innerText = outstr.slice(key,key+1);
                item.style.cssText += `top: ${key * 70 + 50}px`;
                papa.appendChild(item);
        });
        let tits = document.querySelectorAll('.tit');
        (function chgFn() {
                tits.style.animation = 'rot2 linear 1s backwards';
                setTimeout( () => {
                        chgFn();
                        tits.style.animation = '';
                }, 1200);
                num += 1;
                if(num > outstr.length - 1) num = 0;
        })();
})();
</script>

冰心 发表于 2023-7-22 21:45

@三月的阳光   做贴辛苦哈{:4_185:}

红影 发表于 2023-7-22 22:23

冰心嫂子的歌曲好听，这个帖子也做得漂亮。珠联璧合，这个帖子太棒了{:4_199:}

红影 发表于 2023-7-22 22:24

完完整整听完，很喜欢的声音，轻柔而美妙{:4_187:}

醉美水芙蓉 发表于 2023-7-23 06:55

樵歌 发表于 2023-7-23 07:21

很美妙的小声音，轻柔、多情、动听{:4_187:}

焱鑫磊 发表于 2023-7-23 08:18

棒棒哒！{:4_187:}

风中飞尘 发表于 2023-7-23 09:24

这个帖子 我电脑怎么显示乱码。。。 是不是我太丑啦 {:5_157:}

https://img.365.tf/file/2023/07/23/f9p0bx.png

冰心 发表于 2023-7-23 20:05

风中飞尘 发表于 2023-7-23 09:24
这个帖子 我电脑怎么显示乱码。。。 是不是我太丑啦

可以肯定 嫩老帅了哈

你换极速模式 就不是乱码了哈

冰心 发表于 2023-7-23 20:06

红影 发表于 2023-7-22 22:23
冰心嫂子的歌曲好听，这个帖子也做得漂亮。珠联璧合，这个帖子太棒了

蛮喜欢小齐的歌哈分享

冰心 发表于 2023-7-23 20:07

红影 发表于 2023-7-22 22:24
完完整整听完，很喜欢的声音，轻柔而美妙

哈 K歌 打榜的歌曲   {:4_189:}

冰心 发表于 2023-7-23 20:07

醉美水芙蓉 发表于 2023-7-23 06:55
好听！

问好芙蓉周末愉快哈

冰心 发表于 2023-7-23 20:08

樵歌 发表于 2023-7-23 07:21
很美妙的小声音，轻柔、多情、动听

谢谢樵歌上茶 听歌哈

冰心 发表于 2023-7-23 20:09

焱鑫磊 发表于 2023-7-23 08:18
棒棒哒！

谢谢 焱鑫磊 临帖赏鉴哈

红影 发表于 2023-7-23 22:57

冰心 发表于 2023-7-23 20:06
蛮喜欢小齐的歌哈分享

冰心嫂子厉害，喜欢的歌儿都能自己去唱呢{:4_199:}

红影 发表于 2023-7-23 22:57

冰心 发表于 2023-7-23 20:07
哈 K歌 打榜的歌曲

肯定唱完引起一片掌声呢{:4_173:}

樵歌 发表于 2023-7-24 11:43

冰心 发表于 2023-7-23 20:08
谢谢樵歌上茶 听歌哈

嗯，喜欢听，给歌者献花{:4_204:}

冰心 发表于 2023-7-26 23:50

红影 发表于 2023-7-23 22:57
冰心嫂子厉害，喜欢的歌儿都能自己去唱呢

唱着玩众乐乐哈

冰心 发表于 2023-7-26 23:50

红影 发表于 2023-7-23 22:57
肯定唱完引起一片掌声呢

哈哈我练好歌 准备去当麦霸{:4_189:}

红影 发表于 2023-7-27 11:00

冰心 发表于 2023-7-26 23:50
唱着玩众乐乐哈

乐起来的就变成快乐太平洋了{:4_173:}
页: [1] 2
查看完整版本: 【伤心太平洋】