《天葬》- 亚东
本帖最后由 加林森 于 2022-6-15 17:22 编辑 <br /><br /><style>.mama { left: -214px; width: 1024px; height: 600px; background: lightblue url('https://pic.imgdb.cn/item/62a9753e0947543129c7e310.jpg') no-repeat center / cover; position: relative; overflow: hidden;}
.vid { position: absolute; width: 100%; height: 800px; top: -200px; object-fit: cover; opacity: .35;}
.wrap { left: 20px; bottom: 20px; width: fit-content; height: fit-content; padding: 10px; display: flex;align-items: center; gap: 8px; background: rgba(0,200,200,.6) linear-gradient(to right bottom, rgba(0,0,0,.75),rgba(255,255,255,.4)); box-shadow: 2px 2px 2px #000; position: absolute; }
.lrcbox { min-width: 360px; font: normal 1.1em / 1.5em sans-serif; color: #eee; text-shadow: 1px 1px 1px #000; }
.progress { width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: conic-gradient(from 180deg,tan 0%,transparent 0%); cursor: pointer; position: relative; }
.progress::before { position: absolute; content: attr(data-per); width: 100%; height: 100%; border-radius: 50%; background: transparent radial-gradient(#eee,transparent); text-align: center; font: normal 15px / 90px sans-serif; }
.lighten { color: #fff; font-weight: bold; font-size: 1.2em; }
</style>
<div class="mama">
<video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/52/5ec746f5eec22.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="wrap">
<div class="progress" data-per="0%"></div>
<div class="lrcbox"> Loading ...</div>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=178178.mp3" autoplay="autoplay" loop="loop">old browser</audio>
<div style="position: absolute; left:420px; top: 900px; width:75px; height: 20px; ">
<img alt="" src="https://pic.imgdb.cn/item/6247e3c027f86abb2a56f17a.gif"/></div>
</div>
<script>
let lrcbox = document.querySelector('.lrcbox'),
aud = document.querySelector('#aud'),
progress = document.querySelector('.progress');
let lrcAr = [
['2.85','天葬 - 亚东'],
['4.43','歌手：亚东'],
['7.78','所属专辑：天葬'],
['20.48','默默的向你挥挥手，'],
['80.30','告别我们轮回的缘分。'],
['87.28','应招而来天的神鹰，'],
['94.08','请你带走我一生的荣耀。'],
['111.24','轻轻走过曾经的家，'],
['120.30','记住千年不变的誓言。'],
['128.08','应招而来天的神鹰，'],
['134.25','请你打开我阳光的天路。'],
['156.94','如此安宁如此安祥，'],
['163.94','多么美妙神奇的时光。'],
['171.06','死亡在消失生命已经飞翔，'],
['177.87','远去的翅膀上。'],
['185.18','如此安宁如此安祥，'],
['192.41','多么美妙神奇的时光。'],
['199.59','死亡在消失生命已经飞翔，'],
['206.84','远去的翅膀上。'],
['219.18','默默的向你挥挥手，'],
['226.06','告别我们轮回的缘分。'],
['233.54','应招而来天的神鹰，'],
['239.65','请你带走我一生的荣耀。'],
['255.62','轻轻走过曾经的家，'],
['262.41','记住千年不变的誓言。'],
['269.72','应招而来天的神鹰，'],
['275.69','请你打开我阳光的天路。'],
['292.54','默默的向你挥挥手，'],
['298.65','告别我们轮回的缘分。'],
['306.34','应招而来天的神鹰，'],
['312.26','请你带走我一生的荣耀。'],
['326.04','一生的荣耀'],
['328.48','lrc制作：加林森']
];
aud.addEventListener('timeupdate',function(){
let tt = aud.currentTime, str = '';
setProgress(aud.duration,tt);
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr){
if(j > 0) str = lrcAr + '<br>';
str += '<span class="lighten">' + lrcAr + '</span>';
if(j < lrcAr.length - 1) str += '<br>' + lrcAr;
lrcbox.innerHTML = str;
}
}
})
progress.onclick = () => aud.paused ? aud.play() : aud.pause();
function setProgress(task,current) {
if(task <= 0 || current <= 0) return false;
let prog = 100 * current / task;
progress.style.background = `conic-gradient(from 180deg,tan ${prog}%,transparent ${prog}%)`;
progress.setAttribute('data-per',prog.toFixed(2) + '%');
}
</script>
@马黑黑 @樵歌 鹰挡住了球球，音乐无法控制 马黑黑 发表于 2022-6-15 12:09
鹰挡住了球球，音乐无法控制
现在我调成了50的高度了。 马黑黑 发表于 2022-6-15 12:09
鹰挡住了球球，音乐无法控制
我该怎么调整高度呢？ 加林森 发表于 2022-6-15 12:18
我该怎么调整高度呢？
不是调整高度，是调整 .wrap 的 left 和 top 值。这应能从 HTML 结构看得出来是调整哪一个的。 加林森 发表于 2022-6-15 12:18
我该怎么调整高度呢？
你这是调整 GIF 图片的 top 值，不是高度。概念要清晰。 马黑黑 发表于 2022-6-15 12:49
不是调整高度，是调整 .wrap 的 left 和 top 值。这应能从 HTML 结构看得出来是调整哪一个的。
好的。我再去调整。 马黑黑 发表于 2022-6-15 12:50
你这是调整 GIF 图片的 top 值，不是高度。概念要清晰。
明白了，谢谢啦！ 加林森 发表于 2022-6-15 12:56
明白了，谢谢啦！
高度对应的是 height 值，宽度是 width 值，元素的左边起始位置用 left，元素的上边起始位置用 top 马黑黑 发表于 2022-6-15 13:00
高度对应的是 height 值，宽度是 width 值，元素的左边起始位置用 left，元素的上边起始位置用 top
谢谢老黑。 队长可以自己去找点视频的，这个又是黑黑找的呢{:4_173:} 这对死亡的歌颂是多么的震憾人心呐。加加这图图的意境非常适合这种意象。{:4_178:} 我真想看看天葬。 我曾经在藏区道浮县号称世界上最大的天葬台，远远的观摩了天葬过程，那简直难以形容的震憾人心。多少年了，多少年了那场景今天依然历历在目。 很喜欢这首歌的词曲。谢谢你贴来欣赏{:4_187:} 红影 发表于 2022-6-15 16:36
队长可以自己去找点视频的，这个又是黑黑找的呢
这个是套用的，也是第一次制作的。 樵歌 发表于 2022-6-15 16:49
这对死亡的歌颂是多么的震憾人心呐。加加这图图的意境非常适合这种意象。
樵歌，我的任务完成啦。好听吧。 梦油 发表于 2022-6-15 16:52
我真想看看天葬。
很神圣的。 樵歌 发表于 2022-6-15 16:53
我曾经在藏区道浮县号称世界上最大的天葬台，远远的观摩了天葬过程，那简直难以形容的震憾人心。多少年了， ...
我也看过的。很神圣的。