冬天的雨 发表于 2024-6-12 12:33

追不上的青春 TO：小辣椒


<style>
#tz { margin: 130px 0 30px calc(50% - 721px); width: 1280px; height: 853px; background: url('https://file.uhsea.com/2406/fca49207c5fca5d96b728440e21c592f9F.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; }
#lrc { position: absolute; left: 580px; top: 220px; font: normal 30px sans-serif; white-space: nowrap; color: darkgreen; text-shadow: 1px 1px 1px gray; animation: fly 20s linear infinite alternate var(--state); --ww: 350px; }
#player { position: absolute; left: calc(70% - 140px); bottom: 60px; width: 280px; height:10px; background: linear-gradient(to right, var(--color) var(--prg), transparent 0); border: 1px solid var(--color); border-radius: 6px; display: grid; place-items: center; --color: green; --prg: 0%; --btnSize: 50px;}
#player::before, #player::after { position: absolute; content: ''; }
#player::before { width: var(--btnSize); height: var(--btnSize); top: calc(var(--btnSize) * -1 - 5px); background: url('https://638183.freep.cn/638183/t23/btn/f5.png') no-repeat center/cover; filter: hue-rotate(180deg); animation: rot 6s linear infinite var(--state);}
#player::after { content: attr(data-time); inset: -30px 0 10px 0; text-align: justify; text-align-last: justify; font-size: 14px; color: var(--color); pointer-events: none; }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes fly { to { left: calc(100% - var(--ww) - 140px); } }

#dt2{ position: absolute; width:200px; height: 81px; top: 440px; left: 950px; }
#dt3{ position: absolute; width: 140px; height: 104px; top: 80px; left: 1020px; }
</style>

<div id="tz">
<img id="dt2" src="https://pic.imgdb.cn/item/66688f2cd9c307b7e97385d8.png"alt=""style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />
<img id="dt3" src=" https://pic.imgdb.cn/item/66688f01d9c307b7e97356d3.gif " alt=""style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />

        <audio id="aud" src="https://file.uhsea.com/2406/ec7969f4a8f92564751b5d87013ef9f73U.mp3" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/91/5ed0c93e00e78.mp4" autoplay loop muted></video>
        <div id="lrc">HUACHAO PLAYER</div>
        <div id="player" data-time="00:00 00:00"></div>
</div>

<script>
var vids = document.querySelectorAll('.vid');
var btnSize = parseInt(window.getComputedStyle(player).getPropertyValue('--btnSize'));

var lrcKey = 0;

var showLrc = () => {
        if(lrcKey >= lrcAr.length) return false;
        lrc.innerText = lrcAr;
        lrc.style.setProperty('--ww', lrc.offsetWidth + 'px');
        lrcKey ++;
};

var mState = () => {
        tz.style.setProperty('--state',['running','paused'][+aud.paused]);
        if(vids.length > 0) vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};

var s2m = (s) => (Math.floor(s / 60)).toString().padStart(2, '0') + ':' + (Math.floor(s % 60)).toString().padStart(2, '0');

aud.onplaying = aud.onpause = () => mState();

aud.onseeked = () => {
        for(var j = 0; j < lrcAr.length; j ++) {
                if(aud.currentTime < lrcAr) {
                        lrcKey = j - 1;
                        if(lrcKey < 0) lrcKey = 0;
                        break;
                }
        }
};

aud.ontimeupdate = () => {
        player.style.setProperty('--prg', (aud.currentTime / aud.duration * 100 || 0) + '%');
        player.dataset.time = s2m(aud.currentTime) + ' ' + s2m(aud.duration);
        if(lrcKey <= lrcAr.length - 1 && aud.currentTime >= lrcAr) showLrc();
}

player.onclick = (e) => {
        if(e.offsetY > 0) aud.currentTime = aud.duration * e.offsetX / player.offsetWidth;
        if(e.offsetY < 0 && e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) aud.paused ? aud.play() : aud.pause();
}

player.onmousemove = (e) => {
        if(e.offsetY < 0) {
                if(e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) {
                        player.title = aud.paused ? '播放' : '暂停';
                        player.style.cursor = 'pointer';
                }
        }else{
                player.title = '调节进度';
                player.style.cursor = 'pointer';
        }
};

let lrcAr = [
               ['0.00', '作词：东煜 | 作曲：东煜',0.74],
['0.78', '我用了四季',1.86],
['2.74', '想要去成长',2.16],
['5.01', '荒芜的青春',1.71],
['6.81', '我再也追不上',3.62],
['10.62', '操场上的风',2.17],
['12.90', '经过我身边',2.06],
['15.07', '你成了我的整个夏天',4.45],
['19.75', '你微笑的双眼',2.20],
['22.07', '把我的心点燃',2.35],
['24.54', '你就是我贪恋的人间',4.27],
['29.03', '那天你坐在',2.06],
['31.20', '自行车后面',2.19],
['33.50', '夕阳映红你的侧脸',4.41],
['38.14', '风把你的温柔',2.15],
['40.40', '吹向此间少年',2.11],
['42.62', '你慢慢走出我的视线',3.93],
['46.76', '你的目光',2.19],
['49.07', '暖一片星光',2.00],
['51.17', '我的怀里',2.12],
['53.40', '淡淡余香',2.24],
['55.76', '一辈子那么长',2.12],
['57.99', '只记得你的笑',2.22],
['60.33', '那就是你',1.72],
['62.14', '最好的模样',2.52],
['64.79', '年少时光',2.29],
['67.20', '摇摇晃晃',2.18],
['69.50', '大把的时间',2.10],
['71.71', '不够彷徨',2.22],
['74.05', '我用了四季',2.24],
['76.41', '想要去成长',2.16],
['78.68', '荒芜的青春',1.75],
['80.52', '我再也追不上',3.50],
['84.20', '祝小辣椒开心快乐！',8.72],
['93.38', '那天你坐在',2.26],
['95.76', '自行车后面',2.12],
['97.99', '夕阳映红你的侧脸',4.32],
['102.54', '风把你的温柔',2.33],
['104.99', '吹向此间少年',2.02],
['107.12', '你慢慢走出我的视线',3.98],
['111.31', '你的目光',2.32],
['113.75', '暖一片星光',1.78],
['115.62', '我的怀里',2.95],
['118.73', '淡淡余香',1.32],
['120.12', '一辈子那么长',2.24],
['122.48', '只记得你的笑',2.17],
['124.76', '那就是你',1.90],
['126.76', '最好的模样',2.36],
['129.24', '年少时光',2.29],
['131.65', '摇摇晃晃',2.41],
['134.19', '大把的时间',1.82],
['136.11', '不够彷徨',2.22],
['138.45', '我用了四季',2.28],
['140.85', '想要去成长',2.14],
['143.10', '荒芜的青春',1.97],
['145.17', '我再也追不上',2.70],
['148.01', '你的目光',2.00],
['150.12', '暖一片星光',2.05],
['152.28', '我的怀里',2.18],
['154.58', '淡淡余香',2.21],
['156.91', '一辈子那么长',2.20],
['159.23', '只记得你的笑',2.16],
['161.50', '那就是你',1.90],
['163.50', '最好的模样',2.45],
['166.08', '年少时光',2.21],
['168.41', '摇摇晃晃',2.27],
['170.80', '大把的时间',2.09],
['173.00', '不够彷徨',2.27],
['175.39', '我用了四季',2.09],
['177.59', '想要去成长',2.17],
['179.87', '荒芜的青春',1.92],
['181.89', '我再也追不上',3.30],
['185.36', '谢谢欣赏',4.5]

];
</script>

冬天的雨 发表于 2024-6-12 12:35

@小辣椒

任务完成，看看这个图{:4_172:}

冬天的雨 发表于 2024-6-12 12:36

@马黑黑

感谢马老师源码分享，冬雨暂时没有时间玩，以后有时间再上来学习{:4_190:}

愤怒的葡萄 发表于 2024-6-12 12:41

挺不错的，来欣赏了。

冬天的雨 发表于 2024-6-12 12:48

愤怒的葡萄 发表于 2024-6-12 12:41
挺不错的，来欣赏了。

感谢愤怒的葡萄欣赏{:4_187:}

起个网名好难 发表于 2024-6-12 12:50

画面很清爽{:5_116:}

愤怒的葡萄 发表于 2024-6-12 13:19

冬天的雨 发表于 2024-6-12 12:48
感谢愤怒的葡萄欣赏

葡萄因为现实生活中的一些原因，现在很少来花潮论坛了，不过我有空闲会来看一下论坛的。

雨兄在现实生活中也应该非常忙碌的吧。

马黑黑 发表于 2024-6-12 13:20

冬天的雨 发表于 2024-6-12 12:36
@马黑黑

感谢马老师源码分享，冬雨暂时没有时间玩，以后有时间再上来学习

矮油，肿么失踪那么久，四婚去了？还是套第八房呢{:4_170:}

樵歌 发表于 2024-6-12 17:16

终于出来透气冒泡了。小辣椒想你了想了半个夏天了{:4_189:}

樵歌 发表于 2024-6-12 17:17

@小辣椒 快来收礼了

红影 发表于 2024-6-12 18:59

很漂亮清爽的画面，歌曲也好听，还有只会转向的白鹤呢。
欣赏冬小雨好帖，小辣椒亲爱的收礼开心{:4_199:}

走过岁月 发表于 2024-6-13 10:36

欣赏冬雨兄的作品，青春不再了，不过帖子做得很美

朵拉 发表于 2024-6-13 10:55

问好冬雨版，漂亮的制作{:4_204:}

小辣椒 发表于 2024-6-13 21:50

冬天的雨 发表于 2024-6-12 12:35
@小辣椒

任务完成，看看这个图

哇塞，有我的礼物，差点漏了{:4_170:}

小辣椒 发表于 2024-6-13 21:51

好听好看，太喜欢了{:4_197:}{:4_185:}

小辣椒 发表于 2024-6-13 21:51

特别这首歌，听了醉了{:4_205:}

小辣椒 发表于 2024-6-13 21:51

谢谢冬雨，开心收礼{:4_179:}

小辣椒 发表于 2024-6-13 21:53

樵歌 发表于 2024-6-12 17:16
终于出来透气冒泡了。小辣椒想你了想了半个夏天了

樵哥哥{:4_172:}，什么都知道啊{:4_187:}

小辣椒 发表于 2024-6-13 21:53

樵歌 发表于 2024-6-12 17:17
@小辣椒 快来收礼了

谢谢樵哥哥呼叫{:4_179:}

小辣椒 发表于 2024-6-13 21:54

红影 发表于 2024-6-12 18:59
很漂亮清爽的画面，歌曲也好听，还有只会转向的白鹤呢。
欣赏冬小雨好帖，小辣椒亲爱的收礼开心

谢谢亲爱的，一起开心{:4_179:}
页: [1] 2
查看完整版本: 追不上的青春 TO：小辣椒