谁能解这相思苦
本帖最后由 醉美水芙蓉 于 2022-5-28 09:42 编辑 <br /><br /><div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-200px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background: linear-gradient(0deg, #000080, #003300, #882222, #000000); text-align: center;"><img class='photo' style="background: url(https://img-baofun.zhhainiao.com/fs/c4d263524c9eda72a105f4c97b0a4937.jpg)0 0px/100% 100%;"/>
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/fs/1d5519335e3e98489f126de645b529c9.jpg)0 0px/100% 100%;" />
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/fs/09e30c3c5151b0e30d76860aac2cca65.jpg)0 0px/100% 100%;" />
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/fs/dcc0667be05a8858f1ed188306977357.jpg )0 0px/100% 100%;" />
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/fs/ab771f22df24ddc0fc5ace3231e190bd.jpg)0 0px/100% 100%;"/>
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/fs/4e4129630aeeeed51e5d1eebf3c9da81.jpg)0 0px/100% 100%;"/>
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/fs/3df3fefe881911560bf2170e07015806.jpg)0 0px/100% 100%;" />
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/fs/817eeb4c48e5df73872fce45c8381b76.jpg)0 0px/100% 100%;" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=221408415&.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
<div class="btn">
<img src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png" id="playpause"style="position:absolute;top:-35px;left:35px;width:150px;height:150px;z-index: 600;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);"/>
</div>
<div class="img_border" id="aplay"></div>
<div class="items " style="width: 980px; height: 120px;z-index: 500;position: absolute;top:0px; left:0px;">
<divclass="lrc">
<ul id="ullrc">
</ul>
</div></div></div>
</div>
<style type="text/css">
.photo {width: 1000px;
height: 600px;
position: absolute;top:0px; left:0px;
filter:contrast(150%)brightness(80%);-webkit-mask-image: radial-gradient(black 15% ,transparent 70%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {1% {
opacity: 0;
transform:translate(-100%,0%)scale(1);}
5% {
opacity: 1;
transform:translate(-100%,0%)scale(1);}
14% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
16% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
24% {
opacity: 0;
transform:translate(0%,0%)scale(2);}
}
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:0px;z-index: 100;}
.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: 1;
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:50px;
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: 40px;
color: #ff0000;
font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:00px;}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;background:url(http://pan.yinhuabbs.cn/view.php/04a14933839cd61c9a3d44fb6fd59d1d.png)0 0/60%60%, url(http://pan.yinhuabbs.cn/view.php/a85ac24bdbb0e82f4478a2a9f06d148d.png)0 0px/80% 80%;
z-index: 13;position: absolute;
top:-500px;
left: 0px;
animation: rotating 40s linear infinite;}
@keyframes rotating {0%{
background-position: 500% 0;
}
100%{
background-position: 0 -500%;filter:hue-rotate(360deg)
}
}
</style>
<style type="text/css">.items{ z-index: 1540;animation: slider 0.26s linear infinite ;}
@keyframes slider {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>
<script >var lrc = `蔷薇团长 - 谁能解这相思苦（DJ沈念）
作词：李占领
作曲：蔷薇团长
编曲：DJ 沈念
合声：凌菲
制作人：笑天
谁能解这相思的苦
谁能带我逃离情路
回首往事起起伏伏
眼泪不知不觉夺眶而出
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://image.hnol.net/c/2022-05/16/14/20220516140228811-5769293.gif";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png";
}, false);
</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="items";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script> 水芙蓉的制作真漂亮，都是大美女。{:4_190:} 加林森 发表于 2022-5-28 09:57
水芙蓉的制作真漂亮，都是大美女。
队长早上好！ 制作非常漂亮！{:5_116:} 醉美水芙蓉 发表于 2022-5-28 10:01
队长早上好！
水芙蓉上午好！辛苦了，坐下喝杯茶。{:4_190:} 好多的大美人，这个轮播方式真好。真漂亮的制作{:4_187:} 东篱闲人 发表于 2022-5-28 10:04
制作非常漂亮！
东篱老师中午好! 红影 发表于 2022-5-28 11:58
好多的大美人，这个轮播方式真好。真漂亮的制作
红影美女中午好！ 相思苦，不如多喝苹果醋 {:4_170:} 马黑黑 发表于 2022-5-28 13:10
相思苦，不如多喝苹果醋
{:4_170:}我是瞎玩！ 醉美水芙蓉 发表于 2022-5-28 13:25
我是瞎玩！
瞎玩也可以喝喝 醉美水芙蓉 发表于 2022-5-28 12:05
东篱老师中午好!
{:4_190:}
页:
[1]