论坛 › 欢乐水吧 › 红蔷薇 - 风雨中的情【可控】

亚伦影音工作室 发表于 2022-9-5 17:19

红蔷薇 - 风雨中的情【可控】

本帖最后由 亚伦影音工作室 于 2022-9-5 17:20 编辑 <br /><br /><div style="z-index: 127;width: 1024px; height: 600px; margin-top:50px; margin-left:-230px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)0 0/110%100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000); text-align: center;">

<imgsrc="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a6c84d83887bb2108d421c9966df2eb5.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080" style="width:

1024px;height: 600px;filter:hue-rotate(0deg)contrast(140%)brightness(100%);" />
<div class="HT">
<divid="testImg" class="love"><img src="http://pan.yinhuabbs.cn/view.php/945236df52170f56de6884002fe13edd.png" style="width: 100%; height: 100%;z-index: 150;" >
</div>
<audio autoplay=""id="MusicPlayer"src="https://p4.t57.cn:8399/2020/jy/y/FKZ.m4a" loop="" ></audio>
      <div class="btn">
   <divid="testImg"id="bf"onclick="bf()"><input type="button" id="testBtn"value="ll"style="width: 40px; height: 40px;color: #000000;font-size:20px;font-weight:bold;border-radius: 50%;box-shadow: 0px 0px 0px 0px #000000, 0px 0px 0px 3px #eeeeee;"></div>
</div>
<div class="img_border"><imgid="aplay"style="width: 100%; height: 100%;background: linear-gradient(55deg, rgba(6, 1, 1, 0.25) 18%,rgba(4, 50, 242, 0.79) 98%);" ></div>

<div class="lrc">
       <div class="items"> <ul id="ullrc">
         </ul>
      </div></div>
</div>
</div></div>
<style type="text/css">
.love {margin: 0 auto;position: absolute;top:190px; left:200px;z-index: 150;
    display: block;
    width: 400px; height: 280px;
    animation: heart-burst 0.2s infinite ;
}
.stop {
    animation-play-state: paused;
}
@keyframes heart-burst {
0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)scale(0.2);filter:hue-rotate(0deg)}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)scale(2);filter:hue-rotate(360deg)}
100% {opacity: 1;transform: rotateX(0deg) rotateY(0deg) rotateZ(0.2)scale(1);filter:hue-rotate(0deg)}
}
</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 image = document.getElementById("testImg"),
    button = document.getElementById("testBtn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == 'll') {
            image.classList.add('stop');
            this.value = '>';
      } else {
            image.classList.remove('stop');
            this.value = 'll';
      }
    };
}
</script>
<style type="text/css">
.HT{
    width: 1000px;position: absolute;top:0px; left:0px;
}
#MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.btn{
    display: block;z-index: 300;
    margin: 0px 0px;position: absolute;top:540px; left:20px;
}
.lrc{
    width: 870px;
    height: 140px;
    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:480px; left:40px;z-index: 160;
    margin: 0 auto;
}
.container .lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 80px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;transform: translate(0%,0%);
    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: 45px;
    color: #ff0000;transform: translate(0%,0%);
    font-weight: bold;
}
/*动画*/
.img_border{display:inline-block;width:1024px;height:600px;margin:0px ;position: absolute;top:0px; left:0px;z-index: 140;}
.img_border #aplay{ }
.z360z{animation:rotating 1s linear infinite}@keyframes rotating{0% {opacity: 1;background: linear-gradient(45deg, rgba(243, 4, 61, 0.63) 0%,rgba(67, 43, 255, 0.58)

100%);filter:hue-rotate(0deg)contrast(150%)brightness(80%);}
30% {opacity: 1;background: linear-gradient(55deg, rgba(6, 1, 1, 0.25) 18%,rgba(4, 50, 242, 0.79) 98%);filter:hue-rotate(0deg)contrast(120%)brightness(100%);}
60% {opacity: 1;background: linear-gradient(65deg, rgba(4, 4, 243, 0.65) 0%,rgba(20, 245, 6, 0.6) 100%);filter:hue-rotate(0deg)contrast(140%)brightness(80%);}
90% {opacity: 1;background: linear-gradient(75deg, rgba(91, 0, 0, 0.12) 18%,rgba(44, 242, 4, 0.32) 98%);filter:hue-rotate(0deg)contrast(120%)brightness(100%);}
}
</style>

<script>var lrc =`红蔷薇 - 风雨中的情
作词：红袖
作曲：苏军
编曲：Q月若男
来世今生爱一回
知心话儿心已醉
真心牵着你的手
无法停留把你追
你问我爱有多美
我愿一生把你陪
甜蜜爱情心儿醉
有缘与你再相随
今生爱你不后悔
只有相爱才体会
所有的苦所有累
我都愿意为你背
风风雨雨一起飞
不求来世再相随
相亲相爱这辈子
真的爱过才完美
来世今生爱一回
知心话儿心已醉
真心牵着你的手
无法停留把你追
你问我爱有多美
我愿一生把你陪
甜蜜爱情心儿醉
有缘与你再相随
今生爱你不后悔
只有相爱才体会
所有的苦所有累
我都愿意为你背
风风雨雨一起飞
不求来世再相随
相亲相爱这辈子
真的爱过才完美`;
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 = 80, lrc_ul_height = 70;
    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>
         function bf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            if (audio !== null) {
                if (audio.paused) {
                  audio.play(); //audio.play();// 这个就是播放
                  bf.innerText="暂停";
                } else {
                  audio.pause(); // 这个就是暂停
                  bf.innerText="播放";
                }
            }
      }
    </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>

红影 发表于 2022-9-5 19:18

很热烈的帖子，效果很棒。欣赏亚伦老师好帖{:4_187:}

梦缘 发表于 2022-9-5 20:04

欣赏老师的精美播放器，不错的效果，问好！{:4_204:}

醉美水芙蓉 发表于 2022-9-5 20:18

查看完整版本: 红蔷薇 - 风雨中的情【可控】