夜舞（to红影）
<style>.papa { left: -100px; margin-top: 60px; width: 960px; height: 600px; background: url('https://638183.freep.cn/638183/t22/nd1.jpg') no-repeat center/cover; perspective: 1000px; box-shadow: 4px 4px 28px rgba(0,0,0,.85); position: relative; }
.papa>span { width: 50%; height: 50%; transition: all 1s linear; transform-style: preserve-3d; position: absolute; }
.papa>span:hover { transform: rotateZ(var(--zz)) rotateY(var(--yy)); box-shadow: 2px 2px 40px rgba(0,0,0,.95); cursor: pointer; }
.papa>span:nth-child(1) { --zz: 15deg; --yy: 60deg; left: 0; top: 0; background: url('https://638183.freep.cn/638183/t22/nd2.jpg') 0px 0px; }
.papa>span:nth-child(2) { --zz: 15deg; --yy: -60deg; left: 50%; top: 0; background: url('https://638183.freep.cn/638183/t22/nd2.jpg') -480px 0px; }
.papa>span:nth-child(3) {--zz: 15deg; --yy: 60deg; left: 0; top: 50%; background: url('https://638183.freep.cn/638183/t22/nd2.jpg') 0px -300px; }
.papa>span:nth-child(4) {--zz: 15deg; --yy: -60deg; left: 50%; top: 50%; background: url('https://638183.freep.cn/638183/t22/nd2.jpg') -480px -300px; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 10px; bottom: 10px; padding: 10px; font: normal 1em sans-serif; color: tomato; text-shadow: 1px 1px 1px #000; background: transparent; border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
.playbox::before { position: absolute; content: ''; margin: -20px; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255,255,255,.45); filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>
<div class="papa">
<span class="mask"></span>
<span class="mask"></span>
<span class="mask"></span>
<span class="mask"></span>
<div class="playbox">
<p id="geci" style="font-size: 1.2em">LRC Loading ... </p>
<p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
<input id="btnplay" type="button" value=">" />
<input id="slider" type="range" min="0" max="100" value="0" />
<span id="per">0%</span>
</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1868947156.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script language='javascript'>
let papa = document.querySelector('.papa'),
masks = document.querySelectorAll('.mask');
let slip = 0;
let lrcAr = [
['0.00',' 作词 : Tăng Duy Tan'],
['1.00',' 作曲 : Tăng Duy Tan'],
['19.51','Khi màn đêm vừa buông'],
['22.26','Mưa vừa tuôn ở trên mái hiên'],
['23.90','Em vẫn cứ uống'],
['26.41','Sương còn vương hàng trăm'],
['27.75','nỗi đau như kéo em xuống'],
['30.66','Nơi vực sau tận cùng trái tim khô cằn sỏi đá'],
['35.98','Chan trời xa vắng đưa con tim em đi về đau'],
['40.22','Sóng xô muồn trùng'],
['41.27','Đẩy đưa tháng năm yêu lần đầu'],
['44.47','Chưa từng cho phép suy tư'],
['46.34','Em không cho mình đau'],
['47.84','Nhưng sau trong tham tam trái tim'],
['49.90','em đang không ngừng nhỏ máu'],
['52.72','Vì lỡ say trong một vòng tay ai'],
['55.84','Dành cả tương lai đổi lấy nỗi buồn'],
['61.36','Từ đó em không còn cần ai thương'],
['64.58','Giọt sầu ai vương'],
['66.35','Nước mắt em tuôn'],
['70.25','Giữa đêm dài'],
['108.12','Màn đêm ôm lấy em'],
['111.40','Giữ em trong giấc mộng ngày còn ấm êm'],
['116.64','Một hàng mi lấm lem'],
['119.84','Ngả lưng bên nỗi buồn chẳng thể đong đếm'],
['124.56','Chan trời xa vắng đưa con tim em đi về đau'],
['128.84','Sóng xô muồn trùng'],
['129.86','Đẩy đưa tháng năm yêu lần đầu'],
['133.15','Chưa từng cho phép suy tư'],
['134.69','Em không cho mình đau'],
['136.35','Nhưng sau trong tham tam trái tim'],
['138.50','em đang không ngừng nhỏ máu'],
['141.29','Vì lỡ say trong một vòng tay ai'],
['144.40','Dành cả tương lai đổi lấy nỗi buồn'],
['149.96','Từ đó em không còn cần ai thương'],
['153.16','Giọt sầu ai vương'],
['154.92','Nước mắt em tuôn'],
['158.71','Giữa đêm dài']
];
masks.forEach((item, key) => {
item.onclick = () => item.style.opacity = '0';
item.onmouseover = () => item.style.opacity = '1';
});
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>
封面可以弄去 封面弄去之后，又可以回来 这个就是CSS精灵吧。 歌词翻译：
作词 : Tăng Duy Tan
作曲 : Tăng Duy Tan
Khi màn đêm vừa buông
当夜幕降临
Mưa vừa tuôn ở trên mái hiên
雨落在屋檐
Em vẫn cứ uống
她还在喝
Sương còn vương hàng trăm
露水犹在
nỗi đau như kéo em xuống
万千痛苦将她击倒
Nơi vực sau tận cùng trái tim khô cằn sỏi đá
在那 她心深处 已不再有任何希望
Chan trời xa vắng đưa con tim em đi về đau
遥远的地平线会把她的心带到哪里
Sóng xô muồn trùng
波涛汹涌
Đẩy đưa tháng năm yêu lần đầu
仿佛卷起初恋的岁月
Chưa từng cho phép suy tư
她不允许自己回忆
Em không cho mình đau
不让自己陷入痛苦
Nhưng sau trong tham tam trái tim
但内心深处
em đang không ngừng nhỏ máu
却从未停止滴血
Vì lỡ say trong một vòng tay ai
不小心落入他的怀抱
Dành cả tương lai đổi lấy nỗi buồn
她赌上整个未来却只换来伤悲
Từ đó em không còn cần ai thương
她发誓不再需要任何人的爱
Giọt sầu ai vương
悲伤侵袭
Nước mắt em tuôn
她的泪水流淌
Giữa đêm dài
在漫漫长夜
Màn đêm ôm lấy em
黑夜拥抱着她
Giữ em trong giấc mộng ngày còn ấm êm
把她留在旧日的温梦
Một hàng mi lấm lem
美丽的睫毛
Ngả lưng bên nỗi buồn chẳng thể đong đếm
沾染着永无止境的悲伤
Chan trời xa vắng đưa con tim em đi về đau
遥远的地平线会把她的心带到哪里
Sóng xô muồn trùng
波涛汹涌
Đẩy đưa tháng năm yêu lần đầu
仿佛卷起初恋的岁月
Chưa từng cho phép suy tư
她不允许自己回忆
Em không cho mình đau
不让自己陷入痛苦
Nhưng sau trong tham tam trái tim
但内心深处
em đang không ngừng nhỏ máu
却从未停止滴血
Vì lỡ say trong một vòng tay ai
不小心落入他的怀抱
Dành cả tương lai đổi lấy nỗi buồn
她赌上整个未来却只换来伤悲
Từ đó em không còn cần ai thương
她发誓不再需要任何人的爱
Giọt sầu ai vương
悲伤侵袭
Nước mắt em tuôn
她的泪水流淌
Giữa đêm dài
在漫漫长夜 本帖最后由 马黑黑 于 2022-7-2 08:07 编辑
歌手 Tăng Duy Tan 和其搭档，创作风格有一贯特性，包括主题与曲调在内，均围绕生活的艰辛与无奈以及不息的奋斗精神展开，可以一听 加林森 发表于 2022-7-2 07:56
这个就是CSS精灵吧。
封面的切分，是CSS精灵技法实现的。CSS精灵主要用于切分图片以达到所需的样纸。 马黑黑 发表于 2022-7-2 08:06
封面的切分，是CSS精灵技法实现的。CSS精灵主要用于切分图片以达到所需的样纸。
嗯嗯。 最里面核心看不到。{:4_173:} 樵歌 发表于 2022-7-2 08:42
最里面核心看不到。
看看你有木有办法额{:4_170:} 这个是可以真真切切完完整整看内里的100%健康的内容的 时光隧道{:4_173:} 黑黑这个图图做精灵效果漂亮，切分图片效果美美的{:4_178:} 小辣椒 发表于 2022-7-2 12:06
黑黑这个图图做精灵效果漂亮，切分图片效果美美的
里面的能完整看吗{:5_117:} 马黑黑 发表于 2022-7-2 12:07
里面的能完整看吗
看不全，可以看见底图 小辣椒 发表于 2022-7-2 12:09
看不全，可以看见底图
可以看全的：一个一个单击 马黑黑 发表于 2022-7-2 12:09
可以看全的：一个一个单击
我试一下 四海八荒 发表于 2022-7-2 11:53
时光隧道
找到入口了？ 小辣椒 发表于 2022-7-2 12:13
我试一下
然后滑过，又恢复原形 马黑黑 发表于 2022-7-2 12:09
可以看全的：一个一个单击
可以了，一个个点击，底图也是特别漂亮。游戏中的女中豪杰{:4_189:}