深爱的人间

醉美水芙蓉 发表于 2022-5-27 22:08

本帖最后由醉美水芙蓉于 2022-5-28 17:07 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0">
<div style="z-index: 127;width: 1200px; height: 600px; margin-top:10px; margin-left:-300px;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://img-baofun.zhhainiao.com/fs/2bb3f1ceb9a86c8c615818a5ab033821.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/e7af4f5a97732b92edcae1a9397ebfe7.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/99bb23054689d6d4bfe3fe5691e475df.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/b23fe0cd4c746b2b7317d31df06191ec.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/c786b8abcdecc2150af20125879b9630.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/874a611583bd93eed87052435a0a441e.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/dabfe2c7fa968650a9c576192e38306c.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/4c4aeb0b71b7077703bbdeda09d48418.jpg" alt="" /></div>
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src=" https://www.qqmc.com/up/kwlink.php?id=216646005&.mp3" 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: 450px;
z-index: 13;position: absolute;
top:-500px;
left: 20px;background: url(http://pan.yinhuabbs.cn/view.php/6af12b2821c973722affd1022d221ddf.jpg)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 = `深爱的人间 (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://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>
</td></tr></table>

加林森 发表于 2022-5-27 22:19

水芙蓉制作得真漂亮，赞！现在我用的是手机，声音关得很小。明天上电脑给你加分哈。

红影发表于 2022-5-28 10:43

真漂亮的制作，动态和轮播图以及歌词同步都很炫。欣赏水芙蓉好帖{:4_187:}

马黑黑 发表于 2022-5-28 13:12

很青春靓丽的样纸

醉美水芙蓉 发表于 2022-5-28 13:25

加林森发表于 2022-5-27 22:19
水芙蓉制作得真漂亮，赞！现在我用的是手机，声音关得很小。明天上电脑给你加分哈。

队长下午好！

醉美水芙蓉 发表于 2022-5-28 13:26

红影发表于 2022-5-28 10:43
真漂亮的制作，动态和轮播图以及歌词同步都很炫。欣赏水芙蓉好帖

谢谢红影美女精彩点评！

醉美水芙蓉 发表于 2022-5-28 13:26

马黑黑发表于 2022-5-28 13:12
很青春靓丽的样纸

谢谢黑黑老师精彩点评!

加林森 发表于 2022-5-28 13:31

醉美水芙蓉发表于 2022-5-28 13:25
队长下午好！

水芙蓉下午好！{:4_190:}

马黑黑 发表于 2022-5-28 15:59

醉美水芙蓉发表于 2022-5-28 13:26
谢谢黑黑老师精彩点评!

请喝咖啡{:4_190:}

页: [1]

花潮论坛's Archiver

深爱的人间