|
|
楼主 |
发表于 2024-10-31 08:31:58
|
显示全部楼层
IP:
<style >
#papa { margin: 10px 20px ; width: 1164px; height: 640px; background:#000 url('https://pic.imgdb.cn/item/67162491d29ded1a8c210f14.jpg') no-repeat center/cover; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:4%; left:85%;color:#000;font: normal 2em 楷体; opacity: 1; cursor: pointer; z-index: 10}
#mdiv {top:12%; left:85%;cursor: pointer;width:120px;height: 120px;border: 3px solid #000;border-radius: 50%;animation:rot 10s linear infinite;position: absolute;z-index: 40;background:#000 url('https://pic.imgdb.cn/item/67162491d29ded1a8c210f14.jpg') no-repeat center/cover;}
@keyframes rot { to { transform: rotate(2turn);} }
.lrc{z-index: 10;width: 90%;height: 180px;overflow: hidden;filter:drop-shadow(#ccc 1px 0 0)drop-shadow(#ccc 0 1px 0)drop-shadow(#ccc -1px 0 0) drop-shadow(#ccc 0 -1px 0);display: block;position: absolute;top:85%; left:5%; margin: 0 auto;}
.lrc #ullrc{width: 100%;padding: 0;list-style: none;transition: 0.3s all ease; margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{height: 70px;line-height: 60px;font-family:华文隶书; font-size: 0px; color: #000078; font-weight: normal; transition: .3s all ease;list-style-type: none; text-align: center;display: block;width: 100%;margin: 0 auto;}
/*动态歌词样式*/.lrc #ullrc li.active{ font-size: 44px;color: #800080;text-align: center;}
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<div style="width: 100%;height: 1050px;position: absolute;MARGIN-LEFT:-210px;MARGIN-top:86px;">
<div id="papa">
<audio autoplay="" id="aud" loop="" src="https://s2.ananas.chaoxing.com/sv-w7/audio/8a/86/ab/c1457dd84a312a4ae19386243974e18d/audio.mp3"> </audio>
<span id="fullscreen">全屏观赏</span>
<div id="mdiv"></div>
<div class="lrc" ><div id="wzsd1"><ul id="ullrc"></ul></div></div>
</div>
</div>
<div style="width: 100%;height: 950px;"> </div>
<script >
mdiv.onclick = () => aud.paused ? aud.play():aud.pause();
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
/*歌词特效*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script >
<script >
var lrc = `[00:01.00]情罪-陈瑞
[00:06.37]作词：高寒
[00:09.56]作曲：高寒
[00:12.75]演唱：陈瑞
[00:15.94]编曲：薛云贻
[00:19.13]和声：南妮
[00:22.32]混音：乐艺文化
[00:25.51]监制：陈瑞/飞翔
[00:28.7]营销推广：何大为
[00:31.89]出品：飞翔文化传媒
[00:35.07]发行：漫吞吞文化
[00:38.26]「未经著作权人许可. 不得翻唱翻录或使用」
[00:41.46]一个人跳着孤单的舞步
[00:50.64]让寂寞就像流泪的红烛
[01:00.84]任我心反反复复为谁而倾诉
[01:08.25]端起孟婆汤心里无助
[01:18.270004]曾经欢乐有过无数
[01:27.6]遗憾爱还是凄美的谢幕
[01:37.770004]我和你之间能有谁赢谁输
[01:45.119995]只有奈何桥分别一幕
[01:52.41]谁是谁非谁错谁对
[01:59.82]谁又是为谁犯下情罪
[02:07.29]红尘再没有今生轮回
[02:14.67]今世豪情又该为谁醉
[02:21.45]谁是谁非谁错谁对
[02:29.37]谁又是为谁犯下情罪
[02:36.84]红尘再没有今生轮回
[02:44.19]今世豪情又该为谁醉
[03:24.75]谁是谁非谁错谁对
[03:32.25]谁又是为谁犯下情罪
[03:39.63]红尘再没有今生轮回
[03:47.01]今世豪情又该为谁醉
[03:54.3]谁是谁非谁错谁对
[04:01.8]谁又是为谁犯下情罪
[04:09.21]红尘再没有今生轮回
[04:16.56]今世豪情又该为谁醉
[04:23.97]今世豪情又该为谁醉
`;
document.write('<script src="https://bbs.ltxjob.com/forum.php?mod=attachment&aid=MTI5ODl8YjFjMTEyYjl8MTczMDMzMzcyNnwxMjh8MTEzODk%3D" type="text/javascript" charset="utf-8"><\/script>');
</script>
|
评分
-
查看全部评分
|
发表于 2024-10-31 08:02:34
发表于 2024-10-31 08:31:09
发表于 2024-10-31 09:18:23
