亚伦影音工作室 发表于 2024-11-19 21:47

吕口口 - 放纵L

本帖最后由 亚伦影音工作室 于 2024-11-20 02:40 编辑 <br /><br /><style>
#papa { margin: 180px 0 20px calc(50% - 681px); background:#800 url('https://pic.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg')no-repeat center/cover;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;}
#tz { margin: 0px auto; bottom: 0px;width: 840px; height: 300px; border: 0px solid gray; position: absolute;}
#tz::before { content: attr(data-lrc); position: absolute; bottom: 0;margin: 0px 20px;width: 100%; height: 60px; text-align: center; font: 300 3.2em/0em 华文行楷; color:#880000; filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0); }
#player { position: absolute; top: 90px; left: calc(50% - 361px);width: 100px; height: 210px;transform: rotate(6deg);transform-origin: bottom center;cursor: pointer; animation: rot 3s linear infinite var(--state); }
@keyframes rot { 50% { transform: rotate(-6deg); }}
</style>
<div id="papa">
<div id="tz" data-lrc="亚伦影音">
    <img id="player" src="https://pic.imgdb.cn/item/673c9572d29ded1a8cf67927.png" alt="" title="播放/暂停" />
</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/90/63/9c/5007d20e86c2156d8625bd686381cf73/audio.mp3" autoplay loop></audio>
<script>
var curkey = 0, lrcAr = [];
var getAr = (text) => {
    var ar = text.trim().split('\n');
    ar.sort();
    var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      let result = item.match(reg);
      let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
      lrcAr.push(.trim()]);
    });
};
var mState = () => {
    tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
    player.title = ['暂停','播放'][+aud.paused];
    //其它控制代码
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
    if(curkey > lrcAr.length - 1) return;
    if(aud.currentTime >= lrcAr) {
      tz.dataset.lrc = lrcAr;
      curkey ++;
    }
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var lrc = `吕口口 - 放纵L
看着我的眼睛
为什么不敢看我
对你爱的入迷
你犯了错我从来都不说
哪怕别人都说是过错
我依然深爱着你
没想到这份真心
被践踏的是我
你已离我而去
为什么别说是因果
我也开始猜疑
这么爱你连她都没赢过
现在自己也陷入了困惑
原来你都是在骗我
我只能看着自己
被你伤得彻底
是我太过放纵你也只能怠慢了自己
我一次一次的想我有多么爱你
我不忍心怪你宁愿自己折磨自己
也许是别人不明白的神经
你已离我而去
为什么别说是因果
我也开始猜疑
这么爱你连她都没赢过
现在自己也陷入了困惑
原来你都是在骗我
我只能看着自己
被你伤得彻底
是我太过放纵你也只能怠慢了自己
我一次一次的想我有多么爱你
我不忍心怪你宁愿自己折磨自己
也许是别人不明白的神经`;
getAr(lrc);
</script>

红影 发表于 2024-11-19 22:04

用摇曳的花枝做播放器，这构思真不错。
欣赏亚伦老师好帖{:4_187:}

红影 发表于 2024-11-19 22:05

画面清爽，歌词同步漂亮，很赞{:4_187:}

夕阳黄昏 发表于 2024-11-20 07:42

美帖欣赏！

梦油 发表于 2024-11-20 09:51

欣赏佳作，问候亚伦。
页: [1]
查看完整版本: 吕口口 - 放纵L