论坛 › 欢乐水吧 › 【习作】 告别缘分退出红尘--云娃

相约爱晚亭 发表于 2022-10-8 10:26

【习作】 告别缘分退出红尘--云娃

本帖最后由 相约爱晚亭 于 2022-11-2 22:21 编辑 <br /><br /><div style="position: relative; width: 1000px; top:100px; left: -214px">

<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1738904">
<style type="text/css">
        #outblk        {margin: auto;
        width: 1024px;
        height: 600px;
        background: rgba(0,0,0,.45) url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/034cbd2c32a0eeb2f685d50dd969c9fe.jpg') no-repeat center/cover;
        margin-top: 0px;
        margin-left: 0px;
        box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #5c00e6;
        display: grid;
        place-items: center;
        overflow: hidden;
        position: relative;
        z-index: 1;
        }
#photo {
        width: 1024px;
        height: 600px;
        position: absolute;
        border: 0px solid #000000;
        top: 0px;
        left: 0px;
        background:#800000 linear-gradient(45deg, #0411FA 29%,#8B43C9 79%);}
#photo img {
        width: 1024px;
        height: 600px;
        position: absolute;
        border: 0px solid #000000;
        top: 0px;
        left: 0px;
        filter: contrast(120%)brightness(110%);
      opacity: 0;
        animation-name: round;
        animation-duration: 48s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
}

@keyframes round{0% {
opacity: 0;
-webkit-transform:translate(0%,0%)scale(1);}


10% {
opacity: 1;background-position: 0% 0%;
}
12% {
opacity: 1;background-position: 0% 0%;
}

18% {
opacity: 0;background-position: 0% 0%;
-webkit-transform:translate(0%,0%)scale(1);}


}

#photo img:nth-child(8) {
        animation-delay: 42s;
}

#photo img:nth-child(7) {
        animation-delay: 36s;
}

#photo img:nth-child(6) {
        animation-delay: 30s;
}

#photo img:nth-child(5) {
        animation-delay: 24s;
}

#photo img:nth-child(4) {
        animation-delay: 18s;
}

#photo img:nth-child(3) {
        animation-delay: 12s;
}

#photo img:nth-child(2) {
        animation-delay: 6s;
}

#photo img:nth-child(1) {
        animation-delay: 0s;
}
.stop #photo img:nth-child(1) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(2) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(3) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(4) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(5) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(6) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(7) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(8) {
        animation-play-state: paused;
}



.lrcShow{
        position: absolute;
        top: 480px;
        font-family: 华文隶书;
        font-size: 45px;
text-align: center;
    display: block;
        white-space: nowrap;
        color: #000080;
       
        filter: drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;
}
.lrcShow::before{position: absolute;
        color: #FF0000;width: 0%;
      height: 100%;
text-shadow:2px 1px 1px #000;
        overflow: hidden;content:attr(data-lrc);overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);
        }
@keyframes bgMove1{from{width:0%;filter:hue-rotate(0deg);}to{width:100%;filter:hue-rotate(360deg)contrast(100%)brightness(600%);}}
@keyframes bgMove0{from{width:0;filter:hue-rotate(360deg)contrast(120%)brightness(400%);}to{width:100%;filter:hue-rotate(0deg);}}

.mCtrl{border:2px solid #000000;border-radius:50%;display:inline-block;width:90px;height:90px;margin:0px;position:absolute;bottom:30px;right:30px;transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);background: url('http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);background-position:0 0;background-size:100% 100%;}
.z360z{animation:rotating 10s linear infinite;}@keyframes rotating{0%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}100%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}}
        #mtitle        {
                -webkit-background-clip:text;
                -webkit-text-fill-color:transparent;
                -webkit-text-stroke:1px rgb(0,71,171); background-image:url('https://z3.ax1x.com/2021/07/10/WSvNo4.gif');line-height:180%;
                font:bold 3em 华文隶书;
        }
</style>
<div id="outblk"><div id="testImg">
<divid="photo">
<img src="https://s1.ax1x.com/2022/10/07/x8t7TK.jpg" />
<img src="https://s1.ax1x.com/2022/10/07/x8thl9.jpg" />
<img src="https://s1.ax1x.com/2022/10/07/x8t3Lt.jpg" />
<img src="https://s1.ax1x.com/2022/10/07/x8tRW4.jpg" />
<img src="https://s1.ax1x.com/2022/10/07/x8tfSJ.jpg" />
<img src="https://s1.ax1x.com/2022/10/07/x8thl9.jpg" />
<img src="https://s1.ax1x.com/2022/10/07/x8tTw6.jpg" />
<img src="https://s1.ax1x.com/2022/10/07/x8tqYD.jpg" /> </div></div>
<div style="width:900px; height:600px;position:relative;margin-top: 20px;
        margin-left: 30px;overflow:hidden;">
<span id="mtitle" >告别缘分退出红尘--云娃</span>
<div style="position: relative; width: 1000px; top:480px; left:650px;font-family:楷体;font-size: 28px;font-weight:bold;font-style: italic; color:#99cc00;">相约爱晚亭</div>
<div style="position: relative; width: 1000px; top:460px; left: 800px;font-family:楷体;font-size: 20px;font-weight:bold;font-style: italic; color:#99cc00;">20221008</div>
</div>

<divclass="lrcShow"style="margin-left:-112px;"></div>
        <button id="testBtn"value="." style="position: absolute;width: 1024px; height: 600px;-webkit-background-clip : text;-webkit-text-fill-color:transparent;z-index: 1;border-radius:0%;"><divid="mDisk" class='mCtrl'></div></button>

</div>
<script type="text/javascript">
var lrcPlayerY = function() {
    return this.init.apply(this, arguments)
};
lrcPlayerY.prototype = {
    constructor: lrcPlayerY,
    init: function(opts) {
      lyricTxt = opts.lrcTxt.replace(/(^\s*)|(\s*$)/g, '');
      this.showLrcObj = document.getElementById(opts.lrcShowID);
      this.audioCtrl = document.getElementById(opts.audioCtrl);
      this.lrcShowObj = document.getElementsByClassName('lrcShow');
      this.lrcVec = this.handleLrc(lyricTxt);
      this.genPlayer(opts.audioURL)
    },
    handleLrc: function(lyricTxt) {
      var parts = lyricTxt.replace(/(^\s*)|(\s*$)/g, "").split(/\r|\n|\r\n/);
      var lrcs = new Array();
      for (let index = 0; index < parts.length; index++) {
            let chkTime = parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);
            if (chkTime) {
                tIdx = parts.lastIndexOf(']');
                if (tIdx > 0) lrcTxt = parts.substr(tIdx + 1);
                for (m = 0; m < chkTime.length; m++) {
                  ta = chkTime.substr(1).replace(']', '').split(/:/);
                  _t = ( + ta) * 60 + ( + ta);
                  if (lrcs.length == 0 && _t != 0) {
                        lrcs.push({
                            seconds: 0,
                            words: '正在播放...'
                        })
                  }
                  lrcs.push({
                        seconds: _t,
                        words: lrcTxt
                  })
                }
            }
      }
      return lrcs.sort(function(a, b) {
            return (a.seconds - b.seconds)
      })
    },
    showLrc: function(durTime) {
      this.lrcShowObj.innerHTML = this.lrcShowObj.dataset.lrc = this.lrcVec.words;
      this.lrcShowObj.style.setProperty('--aniName', 'bgMove' + (this.idx % 2));
      this.lrcShowObj.style.setProperty('--durTime', durTime + 'ms');
      this.lrcShowObj.style.setProperty('--aniPlayState', 'running');
      this.idx++
    },
    genPlayer: function(mUrl) {
      this.mObj = document.createElement("audio");
      this.mObj.loop = false;
      this.mObj.muted = false;
      this.mObj.autoplay = true;
      this.mObj.src = mUrl;
      this.lrcShowObj.appendChild(this.mObj);
      var that = this;
      var turn = 0;
      this.idx = 0;
      this.mObj.addEventListener('ended',
      function() {
            that.idx = 0;
            that.audioCtrl.classList.remove('z360z');
            this.play()
      });
      this.mObj.addEventListener('play',
      function() {
            that.audioCtrl.classList.add('z360z');
            that.lrcShowObj.style.setProperty('--aniPlayState', 'running')
      });
      this.mObj.addEventListener('pause',
      function() {
            if (that.idx == 1 && this.currentTime < 1) {
                that.mObj.play();
                return false
            }
            that.audioCtrl.classList.remove('z360z');
            that.lrcShowObj.style.setProperty('--aniPlayState', 'paused')
      });
      this.mObj.addEventListener('error',
      function() {
            console.log("audio wrong, remove play start event");
            that.lrcShowObj.style.display = 'none';
            that.lrcShowObj.removeChild(this)
      });
      this.mObj.addEventListener('timeupdate',
      function() {
            if (that.idx < that.lrcVec.length) {
                if (this.currentTime >= that.lrcVec.seconds) {
                  if (that.idx < (that.lrcVec.length - 1)) {
                        that.showLrc((that.lrcVec.seconds - that.lrcVec.seconds) * 1000 - 100)
                  } else {
                        that.showLrc((this.duration - that.lrcVec.seconds) * 1000 - 100)
                  }
                }
            }
      });
      this.audioCtrl.addEventListener('click',
      function() {
            if (that.mObj.paused) {
                that.mObj.play()
            } else {
                that.mObj.pause()
            }
      })
    }
}
var image = document.getElementById("testImg"),
    button = document.getElementById("testBtn");
   
if (image.classList && image && button) {
button.onclick = function() {
      if (this.value == '.') {
            image.classList.add('stop');
            this.value = '*';
}

else {
image.classList.remove('stop');
            this.value = '.';
}
    };
}

</script>

<script type="text/javascript">
var lrc =`《告别缘分退出红尘》云娃
作词：画地为牢
作曲：张瑞军
LRC歌词制作：相约爱晚亭
夜又深了几分
思念开始不安份
举目望远方的星辰
无依无靠的犹如孤魂
恨自己太天真
相信你说的缘份
无法自拔中毒太深
忘记了回家的那扇门
我要告别缘份退出红尘
做一个绝缘的人
不再苦闷不再分神
不再空等梦中的人
我要告别缘份退出红尘
做一个快乐的人
没有情深没有爱恨
没有想见见不到的人
恨自己太天真
相信你说的缘份
无法自拔中毒太深
忘记了回家的那扇门
我要告别缘份退出红尘
做一个绝缘的人
不再苦闷不再分神
不再空等梦中的人
我要告别缘份退出红尘
做一个快乐的人
没有情深没有爱恨
没有想见见不到的人
我要告别缘份退出红尘
做一个绝缘的人
不再苦闷不再分神
不再空等梦中的人
我要告别缘份退出红尘
做一个快乐的人
没有情深没有爱恨
没有想见见不到的人

`;

var opts = {
        lrcTxt:lrc,
        //lrcShowID:'sLRC',
        audioCtrl:'mDisk',
        //        歌曲MP3链接放这里
        audioURL:'http://link.hhtjim.com/163/1950671280.mp3'
};
new lrcPlayerY(opts);
</script></td></tr></table>
</div>

</div>

<br><br><br><br><br><br><br><br>

相约爱晚亭 发表于 2022-10-8 10:26

谢谢亚伦老师源码分享！

红影 发表于 2022-10-8 11:15

很漂亮的制作，给爱晚亭点赞{:4_187:}

加林森 发表于 2022-10-8 12:14

挺好的。{:4_199:}

相约爱晚亭 发表于 2022-10-9 11:04

红影 发表于 2022-10-8 11:15
很漂亮的制作，给爱晚亭点赞

谢谢您的支持和鼓励！

相约爱晚亭 发表于 2022-10-9 11:04

加林森 发表于 2022-10-8 12:14
挺好的。

谢谢您的支持和鼓励！

加林森 发表于 2022-10-9 11:13

相约爱晚亭 发表于 2022-10-9 11:04
谢谢您的支持和鼓励！

不客气。{:4_190:}

红影 发表于 2022-10-9 20:30

相约爱晚亭 发表于 2022-10-9 11:04
谢谢您的支持和鼓励！

变色歌词和标题特别好看，选的图片也很美{:4_187:}

查看完整版本: 【习作】 告别缘分退出红尘--云娃