无羁 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

醉美水芙蓉 发表于 2023-11-2 21:21

无羁

本帖最后由醉美水芙蓉于 2023-11-2 21:21 编辑 <br /><br /> <div style="z-index: 127;width: 1200px; height: 600px; margin-top:10px; margin-left: -320px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;transform:rotate(0deg);background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213392999032271.gif)0 0/50%100%,url(https://img-baofun.zhhainiao.com/fs/5ff2512a52b4b07ff00e29b1f1417766.jpg)0 0/100%100%,linear-gradient(0deg, #000080, #880000, #003300, #222222); text-align: center;">
<div class="itemm">
<img class='photo'src="https://pic.imgdb.cn/item/65439901c458853aeffe279f.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/654398f6c458853aeffe0481.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/654398e9c458853aeffdd02e.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/654398dec458853aeffda921.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/654398d5c458853aeffd8660.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/65439901c458853aeffe279f.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/654398f6c458853aeffe0481.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/654398e9c458853aeffdd02e.jpg" alt="" /></div>
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://i.mp3.wf/view.php/66deb0d5f1ef408d186473ce01211a42.m4a" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
   <div class="btn">
   <img src="http://pan.yinhuabbs.cn/view.php/60810296157f9035d700f1ab475efcc3.png" id="playpause" style="position:absolute;top:23px;left:85px;width:40px;height:40px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);z-index: 300;"/>

   </div>
<div class="img_border" id="aplay"></div>
<div class="items" style="width: 980px; height: 120px;z-index: 200;position: absolute;top:0px; left:0px;">
<divclass="lrc">
   <ul id="ullrc">
      </ul>
</div></div></div>
</div>
<style type="text/css">.itemm {z-index: 1;width: 800px;
height: 480px;position: relative;-webkit-mask-image: radial-gradient(black 35% ,transparent 65%);
MARGIN-LEFT:120px;margin-top:60px;overflow:hidden;border-radius:0%;
transform-origin: center;}
.photo {width: 800px;
height: 480px;
position: absolute;top:0px; left:0px;
filter:contrast(130%)brightness(100%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {6% {
opacity: 1;}
10% {
opacity: 1;transform:translate(0%,0%)scale(1);
}
25% {
opacity: 0;transform:translate(0%,0%)scale(3);
}

}

img:nth-child(8) {animation-delay: 42s;}
img:nth-child(7) {animation-delay: 36s;}
img:nth-child(6) {animation-delay: 30s;}
img:nth-child(5) {animation-delay: 24s;}
img:nth-child(4) {animation-delay: 18s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
</style >

<style type="text/css">
.container{width: 1px;height: 1px;
margin: 0;position: absolute;top:500px; left:-20px;z-index: 50;}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;}
.container .btn{
display: block;z-index: 300;
margin: 0;}
.container .lrc{
width: 960px;
height: 120px;z-index: 200;
overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
display: block;position: absolute;top:-10px; left:150px;
margin: 0 auto;}
.container .lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.container .lrc #ullrc li{
height: 70px;
line-height: 70px;
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;}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
font-size: 43px;
color: #ff0000;
font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:0px;transform: scale(1,1);transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1200px; height: 590px;
z-index: 13;position: absolute;
top:-500px;
left: 20px;background: url(http://pan.yinhuabbs.cn/view.php/3bdf4e0b65699ae4482501ac735f15c7.png)0 0/100%100%;
animation: rotating 0.022s linear infinite;}
@keyframes rotating {
from {opacity: 0.5;filter:hue-rotate(0deg)contrast(120%)brightness(100%);transform: scale(1);}

to {opacity: 0.4;filter:hue-rotate(360deg)contrast(110%)brightness(100%);transform: scale(1.5);}}

</style>
<style type="text/css">.items{ z-index: 1540;animation: slider 0.26s linear infinite ;}
@keyframes slider {0% {transform: translate(0px, 0px) rotate(0deg);
      filter:hue-rotate(0deg)contrast(120%)brightness(100%);drop-shadow( 0px 0px 4px white)drop-shadow（ 0 -5px 4px #ff3) drop-shadow(2px -10px 6px #fd3)drop-shadow(-2px -15px 11px #f80)drop-shadow(2px 25px 108px #f20) drop-shadow(2px -25px 40px #ff0000);
}
   25% {transform: translate(1.3px, 0px) rotate(-0.5deg);
      filter: hue-rotate(360deg)contrast(120%)drop-shadow( 0px 0px 40px white) drop-shadow( 2px -7px 6px #ff3) drop-shadow(2px -12px 8px #fd3)drop-shadow( -3px -20px 11px #f80)drop-shadow(2px -125px 88px #f20) drop-shadow(4px -30px 22px #ff0000);
   }
   50% {transform: translate(1.5px, -1.5px) rotate(-1.5deg);
      filter:hue-rotate(360deg)contrast(120%) hue-rotate(0deg)contrast(120%)drop-shadow( 0px 0px 10px white)drop-shadow(2px -10px 8px #ff3) drop-shadow(2px -14px 10px #fd3)drop-shadow(-4px -25px 11px #f80)drop-shadow(2px -25px 120px #f20)drop-shadow(4px -35px 30px #ff0000);
   }
   75% {transform: translate(-1.4px, -1px) rotate(2deg); }
      filterhue-rotate(360deg)contrast(120%):drop-shadow( 0px 0px 10px white)drop-shadow( 2px -7px 6px #ff3) drop-shadow(2px -12px 8px #fd3)drop-shadow(-3px -20px 11px #f80) drop-shadow(2px -5px 48px #f20)drop-shadow(4px 30px -22px #ff0000);
   }
   100% {transform: translate(-1.4px, -1px) rotate(1.5deg);
      filter: contrast(120%)hue-rotate(0deg)drop-shadow( 0px 0px 2px white)drop-shadow( 0 -5px 4px #ff3) drop-shadow(2px -10px 6px #fd3）drop-shadow（-2px -15px 11px #f80）drop-shadow(2px -35px 18px #f20)drop-shadow（2px -25px 18px #ff00000);
   }
   }
</style>
<script >var lrc = `无羁 (Live) - 肖战/王一博
词Lyricist：澄一/冥凰
曲Composer：林海
编曲Arranger：林海
制作人Producer：林海
和声Background Vocalist：肖山
混音Mixing：郭巍（台湾）
LRC编辑：醉美水芙蓉
闻笛声独惆怅云深夜未央
是与非都过往醒来了
怎能当梦一场
红尘中毁誉得失如何去量
萧萧血热刀锋凉
山高水远
又闻琴响
陈情未绝卧荻花月如霜
煮一壶生死悲欢祭少年郎
明月依旧何来怅惘
不如潇潇洒洒历遍风和浪
天涯一曲共悠扬
穿万水过千山路尽人茫茫
是与非都过往醒来了
就当它梦一场
红尘中毁誉得失如何去量
萧萧血热刀锋凉
山高水远
又闻琴响
陈情未绝笑世事多无常
煮一壶生死悲欢祭少年郎
明月依旧何来怅惘
不如坦坦荡荡历遍风和浪
天涯一曲共悠扬
煮一壶生死悲欢祭少年郎
明月依旧何来怅惘
不如坦坦荡荡历遍风和浪
天涯一曲共悠扬
天涯
天涯一曲共悠扬
谢谢欣赏！
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
   parts = getLrcObj(parts);
}
return parts;

function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
   var min = +timeParts;
   seconds = min * 60 + seconds;
   var words = twoParts;
   return{
         seconds: seconds,
         words: words,
   };
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
   var li = document.createElement("li");
   li.innerText = lrcArray.words;
   $("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
   return;
}
var lrc_li_height = 70, lrc_ul_height = 50;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
   activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("MusicPlayer").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
   if (lrcArray.seconds > time) {
         return index - 1;
   }
}
}
$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
      var aud = document.getElementById("MusicPlayer");
var img = document.getElementById("playpause");
img.onclick = function() {
if (aud.paused) {
aud.play();
} else {
aud.pause();
}
}
aud.addEventListener("play", function (e) {
img.src="http://pan.yinhuabbs.cn/view.php/35b530b3868a28afe2b97da37543395f.png";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://pan.yinhuabbs.cn/view.php/60810296157f9035d700f1ab475efcc3.png";
}, false);

</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

红影发表于 2023-11-2 21:55

好炫的歌词同步，动态和图片轮播也漂亮。欣赏水芙蓉美女好帖{:4_199:}

红影发表于 2023-11-2 22:02

要是能一键全控就更好了。这个歌曲好像是现场版的，唱得有点接不上的感觉{:4_173:}

醉美水芙蓉 发表于 2023-11-2 23:27

红影发表于 2023-11-2 22:02
要是能一键全控就更好了。这个歌曲好像是现场版的，唱得有点接不上的感觉

vip歌曲无法下载！只能听听免费的了！

红影发表于 2023-11-3 12:58

醉美水芙蓉发表于 2023-11-2 23:27
vip歌曲无法下载！只能听听免费的了！

是的，很多时候很无奈{:4_204:}

页: [1]

花潮论坛's Archiver

无羁