我只能对你潇洒放手
本帖最后由 亚伦影音工作室 于 2024-12-6 18:50 编辑 <br /><br /><style>#papa { margin: 10px 0 20px calc(50% - 721px); background:#800 url('https://pic.imgdb.cn/item/66a34f6ed9c307b7e9581634.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;z-index:10;}
#tz::before { content: attr(data-lrc); position: absolute; bottom: 0;margin: 0px 38px;width: 100%; height: 60px; text-align: center; font: 300 3.5em/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); }
#vid {z-index: 2;position: absolute;width: 100%;height: 100%;object-fit: cover;mix-blend-mode: lighten;}
#mypic {top:96%; left:0%;z-index: 4;
position: absolute;
width:1286px; height: 3px;
background:linear-gradient(90deg,transparent, #ff0000, #00ff80,#fff000, #00ff80, #ff0000,transparent)no-repeat center/100%;
animation: heart-burst.8s infinite;}
@keyframes heart-burst {0% {transform:translate(0%,0%)scale(0, 1);filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
100% {transform:translate(0%,0%)scale(1);filter:hue-rotate(360deg)contrast(180%)brightness(300%);}}
#pyie {top:87%; left:3%;z-index: 44;
display: block;position: absolute;
width: 50px; height: 50px;
background: url(https://pic.imgdb.cn/item/674f8e7ed0e0a243d4dce5ed.png)no-repeat center/250px 50px;
animation: burst steps(5) 1s infinite;}
@keyframes burst {0% {background-position: 0px 0;}
100% {background-position: -250px 0;}}
</style>
<div id="papa">
<div id="tz" data-lrc="亚伦影音"></div>
<div id="pyie" ></div>
<div id="mypic" ></div>
<video id="vid" src="https://video-qn.51miz.com/preview/video/00/00/13/09/V-130942-864B05CF.mp4" autoplay loop muted></video>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/d1/6d/6e/1749f28ef7569b9d4ad001fa21603e7b/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()]);
});
};
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 ++;
}
};
var lrc = `我只能对你潇洒放手
演唱：肖雨蒙
作词：木兰
作曲：木兰
爱到尽头覆水难收
你若想走我不挽留
无奈结局只能接受
未来的路一个人走
现实残酷独自承受
哭着忘记你的所有
曾经一切不去回首
感谢让我重获自由
我只能对你潇洒放手
不再奢求你陪我左右
离别黄昏和下个路口
各自安好都别再回头
我只能对你潇洒放手
时光它永远无法倒流
抛开忧愁为自己加油
期待明天和温暖邂逅
现实残酷独自承受
哭着忘记你的所有
曾经一切不去回首
感谢让我重获自由
我只能对你潇洒放手
不再奢求你陪我左右
离别黄昏和下个路口
各自安好都别再回头
我只能对你潇洒放手
时光它永远无法倒流
抛开忧愁为自己加油
期待明天和温暖邂逅
我只能对你潇洒放手
不再奢求你陪我左右
离别黄昏和下个路口
各自安好都别再回头
我只能对你潇洒放手
时光它永远无法倒流
抛开忧愁为自己加油
期待明天和温暖邂逅
`;
getAr(lrc);
</script>
<script>
pyie.onclick = () => aud.paused ?(aud.play(),vid.play()):(aud.pause(),vid.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mypic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mypic.style.animationPlayState = 'paused');
pyie.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>pyie.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>pyie.style.animationPlayState = 'paused');
</script>
这个炫酷彩条形式更漂亮，好像有点大了，影响看歌词呢。
要是细点在歌词下方会不会更好点？{:4_204:} 当然每个人的感受不同，自己觉得好就好呢{:4_173:} 欣赏亚伦老师好帖{:4_187:} 红影 发表于 2024-12-6 17:43
当然每个人的感受不同，自己觉得好就好呢
改了，还可以！ 漂亮！谢谢亚伦老师精彩分享{:4_191:} 亚伦影音工作室 发表于 2024-12-6 18:26
改了，还可以！
嗯嗯，这样歌词看得更清楚了，还有衬托效果。{:4_187:} 欣赏亚伦精彩的制作{:4_187:} 亚伦最好用动图替换视频，这样手机无敌了{:4_173:}
页:
[1]