痴情的人迷失在红尘
本帖最后由 醉美水芙蓉 于 2022-7-3 22:06 编辑 <br /><br /> <style>.papa { left: -300px; width: 1200px; height: 580px; border-radius: 6px; background: tan url('https://img-baofun.zhhainiao.com/fs/cb193c68d0afbe7dbbe1e2647bd7f5f4.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 4px 4px 8px #000; position: relative; }
#vid { position: absolute; width: 1200px; height: 580px; left: 0px;top:0px; object-fit: cover; opacity: 1;z-index: 1;}
.papa::before, .papa::after { position: absolute; content: ''; border-radius: inherit; width: 50%; height: 100%; transition: all 2s linear;z-index: 10; }
.papa::before { background: tan url('https://img1.kuwo.cn/star/albumcover/500/16/25/1314344504.jpg') no-repeat center/cover;transform: rotateY(0deg); }
.papa::after { left: 50%; background: tan url('https://img1.kuwo.cn/star/albumcover/500/16/25/1314344504.jpg') no-repeat center/cover; transform: rotateY(180deg); }
.papa:hover::before { transform: translate(-100%,-100%) rotate(15deg); }
.papa:hover::after { transform: translate(100%,-100%) rotateY(-180deg); }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: calc(50% 50px); top: 380px; padding: 10px; font: normal 1em sans-serif; color: #FF0000; border-radius: 8px; overflow: hidden; z-index: 20; }
.playbox::before { position: absolute;text-align: center;left: 0; top: 0px; right: 0; bottom: 0; z-index: 20; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #eee; color: #ff0000; }
</style>
<style type="text/css">.items{ animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(100%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(120%)brightness(100%);}}
</style>
<style type="text/css">.items1{ animation: slider1 1s linear infinite ;}
@keyframes slider1 {from {opacity: 1;filter:hue-rotate(160deg)contrast(100%)brightness(100%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(110%)brightness(100%);}}
</style>
<div class="items1"><div class="papa"><video id="vid" src="//img.tukuppt.com/video_show/2418175/00/17/89/5ed0a1b2028ee.mp4" autoplay="autoplay" loop="loop" muted="muted"></video></div>
<div class="playbox">
<div class="items"><p id="geci"style="width: 960px; margin-left: 120px;font-family:华文隶书;font-size: 2.8em;text-align: center;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);">LRC Loading ... </p> </div>
<p style="display: flex; align-items: center; gap: 4px; margin-left: 500px;margin-top: 30px;">
<input id="btnplay" type="button" value=">" />
<input id="slider" type="range" min="0" max="100" value="0" />
<span id="per"style="color: #eeeeee;font-size: 1.2em">0%</span>
</p>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=225508435" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let slider = document.querySelector('#slider'),
aud = document.querySelector('#aud'),
per = document.querySelector('#per'),
btnplay = document.querySelector('#btnplay'),
geci = document.querySelector('#geci');
let slip = 0; //误差值
let lrcAr =[
['2.07','雨中百合 - 痴情的人迷失在红尘'],
['5.07','作词：春妹'],
['6.08','作曲：春妹'],
['8.00','编曲：大约冬季'],
['9.09','发行：雨中百合文化'],
['25.06','LRC编辑：醉美水芙蓉'],
['30.03','从没想过你无情转身'],
['36.10','那些曾经不留恋半分'],
['43.06','偷走我的心盗走我的魂'],
['50.03','却又恋上了她的温存'],
['56.10','想你的时候泪雨时纷纷'],
['63.07','心痛就像扎进一根针'],
['70.03','别再说什么有缘却无分'],
['76.09','明明是你从不曾认真'],
['83.06','痴情的人迷失在红尘'],
['90.02','谁还记得那曾经的吻'],
['96.09','你用温柔扣开我的心门'],
['103.06','又狠心的让我情海沉沦'],
['110.03','痴情的人迷失在红尘'],
['116.09','如何忘记你滚烫的唇'],
['123.05','付出一切换来满身伤痕'],
['130.02','只怪自己对你爱的太深'],
['163.06','想你的时候泪雨时纷纷'],
['170.02','心痛就像扎进一根针'],
['176.09','别再说什么有缘却无分'],
['183.06','明明是你从不曾认真'],
['190.03','痴情的人迷失在红尘'],
['196.09','谁还记得那曾经的吻'],
['203.06','你用温柔扣开我的心门'],
['210.02','又狠心的让我情海沉沦'],
['216.09','痴情的人迷失在红尘'],
['223.05','如何忘记你滚烫的唇'],
['230.02','付出一切换来满身伤痕'],
['236.08','只怪自己对你爱的太深'],
['243.05','付出一切换来满身伤痕'],
['250.01','只怪自己对你爱的太深'],
['255.03','谢谢欣赏！']
];
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
slider.value = prog;
per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr - slip){
geci.innerHTML = lrcAr;
}
}
});
let toMin = (sec) => {
if(!sec) return '0:00';
sec = parseInt(sec);
return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}
</script> 欣赏佳作 制作漂亮，那是芙蓉吗 制作得挺漂亮的。加油！ 背影也迷人。 马黑黑 发表于 2022-7-3 22:09
欣赏佳作
黑黑老师晚上好！ 绿叶清舟 发表于 2022-7-3 22:11
制作漂亮，那是芙蓉吗
清舟美女晚上好！ 加林森 发表于 2022-7-3 22:11
制作得挺漂亮的。加油！
谢谢队长加分鼓励！ 四海八荒 发表于 2022-7-3 22:14
背影也迷人。
四海老师晚上好！谢谢老师精彩点评！ 醉美水芙蓉 发表于 2022-7-3 22:14
黑黑老师晚上好！
晚上好 醉美水芙蓉 发表于 2022-7-3 22:15
清舟美女晚上好！
芙蓉晚上好 醉美水芙蓉 发表于 2022-7-3 22:15
谢谢队长加分鼓励！
辛苦了！{:4_190:} 带视频的，水芙蓉的制作真漂亮{:4_187:} 制作新颖，屏幕有正反面。真棒！{:4_204:} 老师的作品可以上中央新闻了！
页:
[1]