翁奕童苑 发表于 2022-6-28 17:42

《孔雀东南飞》演唱/斯兰

本帖最后由 翁奕童苑 于 2022-6-28 17:48 编辑 <br /><br /><p></p>


<div style="z-index: 127;width: 960px; height: 600px; margin-top:20px; margin-left:-170px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow:
hidden;border-radius:6%;transform:rotate(0deg);background: url(https://www.z4a.net/images/2022/06/28/11b6f6d7cff626dc7a9a175638764d46.jpg)0 0/100%100%; text-align: center;">
<img class='photo'src="https://www.z4a.net/images/2022/06/28/7.jpg" alt="" />
<img class='photo'src="https://www.z4a.net/images/2022/06/28/8.jpg" alt="" />
<img class='photo'src="https://www.z4a.net/images/2022/06/28/6.jpg" alt="" />
<img class='photo'src="https://www.z4a.net/images/2022/06/28/9.jpg" alt="" />
<img class='photo'src="https://www.z4a.net/images/2022/06/28/4.jpg" alt="" />
<img class='photo'src="https://www.z4a.net/images/2022/06/28/5.jpg" alt="" />
<img class='photo'src="https://www.z4a.net/images/2022/06/28/3713c7d83a4e66e35.jpg" alt="" />
<img class='photo'src="https://www.z4a.net/images/2022/06/28/259b2f12dc5209b47.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://music.163.com/song/media/outer/url?id=1838041917.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
   <div class="btn">
      <span id="bf"onclick="bf();"style="width: 960px; height: 380px;z-index: 300;position: absolute;top:-430px; left:0px;"></span>
       </div>
<div style="position: absolute; width: 513px; height: 136px; z-index: 2; left: 530px; top: -480px" id="layer3">
        <p align="center"><strong><font face="宋体" size="6" face="翁奕童苑" color="#FF0000">《孔雀东南飞》</font></strong></p>
        <p align="center"><strong><font face="宋体" size="4" color="#FFff00">演唱/斯兰 编辑/翁奕童苑</font></strong></div>
       <button id="picBtn" class="picBtn"style="position: absolute;top:-60px; left:40px;z-index: 400;"></button>
      
<div class="img_border" id="aplay"></div>
   <div class="b" style="width: 1200px; height: 120px;z-index: 300;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;z-index: 300;
filter:contrast(120%)brightness(80%);-webkit-mask-image: radial-gradient(black 30% ,transparent 70%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {1% {
opacity: 0;
transform:translate(0%,0%)scale(0);}
10% {
opacity: 1;
transform:translate(0%,0%)scale(1);}

20% {
opacity: 0.5;
transform:translate(0%,0%)scale(2);}
22% {
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">
.picBtn {
   
      width: 80px;
      height: 142px;
      border: none;
      outline: none;
      border-radius: 8px;
      background: transparent url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.gif') no-repeat;
      cursor: pointer;
      
</style>
<script language="javascript">

var mu = document.getElementById('MusicPlayer');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.gif')") : (mu.pause(), btn.style.background="url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.png')");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.png')";
})

</script>



<style type="text/css">
.container{width: 0px;height: 0px;
    margin: 0;position: absolute;top:500px; left:0px;}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;}
.container .btn{
    display: block;
    margin: 0;}
.container .lrc{
    width: 960px;
    height: 160px;
    overflow: hidden;
    display: block;position: absolute;top:-80px; left:10px;
    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: 50px;
    line-height: 50px;
font-family:宋体;
    font-size: 30px;
    color: #ffffff;
    font-weight: normal;-webkit-text-stroke:1px #000000;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;font-weight:bold;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
    font-size: 50px;
    color: #ff0000;-webkit-text-stroke:1px #FFFFFF;
    font-weight: bold}

}
</style>
<style type="text/css">.bs{animation: slider0 0.01s linear infinite ;}
@keyframes slider0 {0%,100%{margin: 0px 0px;filter:hue-rotate(360deg)drop-shadow(0px 0px 2px #CD6600) drop-shadow(0px 0px 2px #CD6600)drop-shadow(0px 0px 2px #CD6600)

brightness(100%);}50%{margin: 0px 0px;filter:hue-rotate(0deg)drop-shadow(0px 0px 2px #000090)drop-shadow(0px 0px 2px #000090)drop-shadow(0px 0px 2px #000090)brightness(300%);}}
</style>
<script >var lrc = `《孔雀东南飞》
词/王长安 曲/徐代泉
演唱/斯兰
孔雀东南飞 五里一徘徊
孔雀东南飞 五里一徘徊
一徘徊
孔雀东南飞 五里一徘徊
五里一徘徊 五里一徘徊
五里一徘徊
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 = 50, lrc_ul_height = 160;
    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 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>
<div style="height: 120px;">&nbsp;</div>

红影 发表于 2022-6-28 19:36

这样的图片轮播方式也漂亮。欣赏好帖{:4_187:}
页: [1]
查看完整版本: 《孔雀东南飞》演唱/斯兰