亚伦影音工作室 发表于 2023-1-30 07:07

把悲伤留给自己 (烟嗓版) - 燕栖

<style type="text/css">
#papa { margin: 10px -300px ; width: 1164px; height: 640px; background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/10%10%,linear-gradient(80deg, #000080, #003300, #ff0000, #00f000); box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;transform:rotateX(0deg) scale(1)}
.lyricDisp{font: bold 2.5em华文隶书, sans-serif; transition:.3s all ease;filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px0);}
.lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
.lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:#FF0000;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
.lyricDisp:nth-child(2){color:#000080;text-align:center;font-size:2.5em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:20%;bottom:10px;width:100%;height:100px;margin:16px auto position:relative;z-index: 2}
#rdisk{position:absolute;left:20%;bottom:10px;width:100%;height:100px;z-index: 11}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:20px; left:20px;color:#FF0000; font: bold 2em华文隶书; opacity: 1; cursor: pointer; z-index: 11}
</style>
<div id="papa"title="亚伦影音工作室制作">
<div id="testImg">
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/9060952fbdacde64f8175fde2b369c5f.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/7b05b2865e23289169ec4b6f171bd845.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/92da6789b99b6a5b2f5b71ae750d30d7.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/7de0d2c87ff55e331c4ffe6cfa09a35a.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/c3f5cc74b6780ddab682e3d0e5171ef4.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/7aa76c2847e3a8e380e61d8b08f9c776.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/61b69b81832342a76053c5eb186a1321.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/eca3997748b53fa5611cb017ba74f1cd.jpg" alt="" />


<div id="mpic"></div>
<div id="mpic1" ></div>

</div>
<span id="fullscreen">全屏观赏</span>
<div id="rdisk" title="暂停/播放"><ptype="button"value="*" id="testBtn" style="width: 100%; height: 100%;position:absolute;-webkit-background-clip : text;"></p></div>
<div id="LRCShow" >
            <div class="lyricDisp">亚伦影音工作室</div><div class="lyricDisp"></div>
         </div>

</div>


<textarea id="lrc_content" style="visibility: hidden;">
把悲伤留给自己 (烟嗓版) - 燕栖
词：陈升
曲：陈升
编曲：GK康康
混音：冯鑫阳
能不能让我陪着你走
既然你说留不住你
回去的路有些黑暗
担心让你一个人走
我想是因为我不够温柔
不能分担你的忧愁
如果这样说不出口
就把遗憾放在心中
把我的悲伤留给自己
你的美丽让你带走
从此以后我再没有
快乐起来的理由
把我的悲伤留给自己
你的美丽让你带走
我想我可以忍住悲伤
可不可以你也会想起我
是不是可以牵你的手啊
从来没有这样要求
怕你难过转身就走
那就这样吧我会了解的
把我的悲伤留给自己
你的美丽让你带走
从此以后我再没有
快乐起来的理由
我想我可以忍住悲伤
假装生命中没有你
从此以后我在这里
日夜等待你的消息
把我的悲伤留给自己
你的美丽让你带走
从此以后我再没有
快乐起来的理由
我想我可以忍住悲伤
假装生命中没有你
从此以后我在这里
日夜等待你的消息
</textarea>

<script type="text/javascript">
var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.lrcVec=new Array();this.lyricTxtObj=document.getElementById(opts.lrcTxtID);lyricTxt=this.lyricTxtObj.innerHTML;this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=this.showLrcObj.getElementsByTagName('div');this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0;that.mObj.play()});this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';that.gclines.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}that.idx++}});this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}}}



</script>
<script type="text/javascript">

var opts = {//        下面4个参数是必须的！
                        lrcTxtID:'lrc_content',
                        lrcShowID:"LRCShow",
                        audioURL:"https://www.qqmc.com/mp3/music211652952.mp3",
                        audioCtrl:'rdisk'
                        };
        new lrcPlayer2(opts);

</script>

<style>
.photo {width: 100%;
height: 100%;
position: absolute;z-index: -1;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation-name: round ;animation-duration: 48s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;
}

@keyframes round {0% {opacity: 0;filter:hue-rotate(360deg)}

10% {opacity: 1;}
18% {opacity: 0;}
}

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;
}
img:nth-child(1) {
animation-delay: 0s;
}

.stop img:nth-child(8){
animation-delay: 42s;animation-play-state: paused;
}
.stop img:nth-child(7){
animation-delay: 36s;animation-play-state: paused;
}
.stop img:nth-child(6){
animation-delay: 30s;animation-play-state: paused;
}
.stop img:nth-child(5){
animation-delay: 24s;animation-play-state: paused;
}
.stop img:nth-child(4){
animation-delay: 18s;animation-play-state: paused;
}
.stop img:nth-child(3){
animation-delay: 12s;animation-play-state: paused;
}
.stop img:nth-child(2){
animation-delay: 6s;animation-play-state: paused;
}
.stop img:nth-child(1){
animation-delay: 0s;animation-play-state: paused;
}

#mpic {
        position: absolute;z-index: 1;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        animation: rote 80s linear infinite;
        cursor: pointer;background: url('http://pan.yinhuabbs.cn/view.php/002029cebf9f2d674ef742b5037eda30.png')0 0/50% 65%;
        opacity: 1;
}
.stop #mpic {
animation-play-state: paused;
}

@keyframes rote {
        0%{
      background-position: 600% 0;
    }
    100%{
      background-position: 30% -1600%;filter:hue-rotate(360deg)
    }
}

#mpic1 {
        position: absolute;z-index: 1;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        animation: rotet 100s linear infinite;
        cursor: pointer;background: url('http://pan.yinhuabbs.cn/view.php/002029cebf9f2d674ef742b5037eda30.png')0 0/40% 55%;
        opacity: 1;
}
.stop #mpic1 {
animation-play-state: paused;
}

@keyframes rotet {
       0%{
      background-position: 0% 1600%;
    }
    100%{
      background-position: 0% 0%;filter:hue-rotate(360deg)
    }
}
       
</style>

<script>
var image = document.getElementById("testImg"),
    button= document.getElementById("testBtn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
</script>
<script>
let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>

庶民来了 发表于 2023-1-30 08:56

太专业了，养眼养心。

海笑 发表于 2023-1-30 09:38

欣赏老师佳作！

梦缘 发表于 2023-1-30 10:18

很好听，感谢老师分享！{:4_187:}

红影 发表于 2023-1-30 16:02

漂亮的变色音画，里面的人物很美。欣赏亚伦老师好帖{:4_187:}

小辣椒 发表于 2023-1-30 20:02

亚伦老欺负我，电脑看不见效果，现在手机可以看见

小辣椒 发表于 2023-1-30 20:04

你这个黑黑老师的全屏观赏效果，我电脑看不见

雨中悄然 发表于 2023-1-30 20:07

小辣椒 发表于 2023-1-30 20:04
你这个黑黑老师的全屏观赏效果，我电脑看不见

我这里可以看到全屏。电脑的

小辣椒 发表于 2023-1-30 20:11

雨中悄然 发表于 2023-1-30 20:07
我这里可以看到全屏。电脑的

我电脑浏览器看不见，手机上来看看

醉美水芙蓉 发表于 2023-1-30 21:03

亚伦影音工作室 发表于 2023-1-30 23:02

小辣椒 发表于 2023-1-30 20:11
我电脑浏览器看不见，手机上来看看

我用的是360浏览器 其他没有试试，手机看正常。

小辣椒 发表于 2023-1-31 12:21

亚伦影音工作室 发表于 2023-1-30 23:02
我用的是360浏览器 其他没有试试，手机看正常。

看了源码，主要你图片是http，我浏览器没有兼容模式，所以就看见一个框，其他空的，手机可以看见
页: [1]
查看完整版本: 把悲伤留给自己 (烟嗓版) - 燕栖