尘缘【东篱制图】
本帖最后由 亚伦影音工作室 于 2024-12-29 15:12 编辑 <br /><br /><style>#papa { margin: 10px 0 20px calc(50% - 721px); background:#800 url('https://pic.imgdb.cn/item/67637a1ed0e0a243d4e63608.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 { top:14%; left:20%;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: 600 3.5em/1em 微软雅黑; color:#880000;font-style:italic; 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%);}}
#but{left: 6%;top: 84%;width: 60px; height: 60px;position:absolute; border: 5px solid #800000;z-index: 40;
border-radius: 50%;}
#cndpt{ position: absolute;width: 30px; height: 30px;
background:#800000;left: 56%;
top: 50%;transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 30px; height: 30px;
display: none; background:#800000;left: 62%;
top: 50%;
transform: translate(-50%, -50%);
clip-path: polygon(75% 50%, 0 0, 0 100%)
}
</style>
<div id="papa">
<div id="tz" data-lrc="亚伦影音"> </div>
<div id="but" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</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-w8/audio/4b/12/e1/d96b5f4bc867ecd7b9373f5b8df8ef39/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 = `尘缘 (国语) - 罗文 (Roman Tam)
词：娃娃
曲：徐日勤
尘缘如梦几番起伏总不平
到如今都成烟云
情也成空 宛如挥手袖底风
幽幽一缕香飘在深深旧梦中
繁花落尽一身憔悴在风里
回头时无晴也无雨
明月小楼 孤独无人诉情衷
人间有我残梦未醒
漫漫长路起伏不能由我
人海漂泊尝尽人情淡薄
热情热心换冷淡冷漠
任多少深情独向寂寞
人随风过自在花开花又落
不管世间沧桑如何
一城风絮满腹相思都沉默
只有桂花香暗飘过
繁花落尽一身憔悴在风里
回头时无晴也无雨
明月小楼 孤独无人诉情衷
人间有我残梦未醒
漫漫长路起伏不能由我
人海漂泊尝尽人情淡薄
热情热心换冷淡冷漠
任多少深情独向寂寞
人随风过自在花开花又落
不管世间沧桑如何
一城风絮满腹相思都沉默
只有桂花香暗飘过
一城风絮满腹相思都沉默
只有桂花香暗飘过
`;
getAr(lrc);
</script>
<script>
but.onclick = () => aud.paused ? (aud.play(),enopg.style.display = 'none',cndpt.style.display = 'block',vid.play()) : (aud.pause(),enopg.style.display = 'block',cndpt.style.display = 'none',vid.pause());
mypic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mypic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mypic.style.animationPlayState = 'paused');
</script>
欣赏佳作，问候亚伦。 没有声音 漂亮！谢谢亚伦老师精彩分享{:4_191:} 冬天的雨 发表于 2024-12-29 11:02
没有声音
冬雨你是手机吧，亚伦这个帖的播放器按钮在边上，估计手机看不见，你点击不到按钮 亚伦这个播放器简洁，图图配的也是好，赞的~ 这个套用也是简单，小辣椒争取晚上做一个
谢谢亚伦的精彩分享！{:4_178:} 欣赏老师佳作，点赞！
听歌{:4_208:} 感谢佳作分享 漂亮的彩色线条，所有动态一键全控。
欣赏亚伦老师好帖{:4_199:} 彩条播放器很漂亮了，制作 精彩{:4_204:}
页:
[1]