焱鑫磊 发表于 2023-5-20 00:19

《阳光灿烂的一天》黄绮珊

<style>
#papa { margin: 100px -280px ; width: 1164px; height: 640px; background: url(https://pic2.imgdb.cn/item/6412e67aebf10e5d530a990b.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;}
.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}
</style>
<div id="papa"title="焱鑫磊博客">
<div id="testImg">
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/6466cac10d2dde577742ddff.jpg" /><img alt="" class="photo" src="https://pic2.imgdb.cn/item/6466cadf0d2dde577743009a.jpg" /><img alt="" class="photo"
src="https://pic2.imgdb.cn/item/6466cafb0d2dde5777431ea0.jpg" /><img alt="" class="photo"src="https://pic2.imgdb.cn/item/6466cb170d2dde5777433f16.jpg" /><img alt="" class="photo" src="https://pic2.imgdb.cn/item/6466cb3a0d2dde57774366c0.jpg" /><img alt="" class="photo" src="https://pic2.imgdb.cn/item/6466cb540d2dde5777437fe0.jpg" /><img alt="" class="photo" src="https://pic2.imgdb.cn/item/6466cb6f0d2dde5777439a38.jpg" /><img alt="" class="photo" src="https://pic2.imgdb.cn/item/6466cb8a0d2dde577743b632.jpg" />

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

</div>

<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;">
《阳光灿烂的一天》黄绮珊
《再见那一天》网络剧片头曲
词：向涵曲：胡皓波
LRC歌词制作：焱鑫磊
你说人间不过是苦海
其实生活不曾对谁慷慨
灯塔的路牌 刚出现 又离开
身不由己的不是爱
总有一个身影向你走来
命运早已为你安排 精彩
不过是平凡的原来
生活的齿轮却悄悄更改
带着鲜红的印释怀 再重来
Good bye
我曾经的固执的信仰
别回来
Good bye
我站在不远处回头望
别再看
生活的刺来时的路
阳光灿烂内心深处
忙忙碌碌的脚步
生活的刺来时的路
阳光灿烂内心深处
边走边等的感悟
奔跑的路全力以赴
阳光灿烂内心深处
往前迈 灯塔一直都在
生活的刺来时的路
阳光灿烂内心深处
边走边等的感悟
奔跑的路全力以赴
阳光灿烂内心深处
往前迈 灯塔一直都在
生活的刺来时的路
阳光灿烂内心深处
边走边等的感悟
奔跑的路全力以赴
阳光灿烂内心深处
往前迈 灯塔一直都在

</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.joy127.com/url/104993.mp3",
                        audioCtrl:'rdisk'
                        };
        new lrcPlayer2(opts);

</script>
<style>
#mpic {
        position: absolute;z-index: 1;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 1164px;
        height: 640px;
        animation: rote 100s linear infinite;
        cursor: pointer;background: url('https://pic2.imgdb.cn/item/6412e92cebf10e5d531beddb.png')0 0/80% 90%;
        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: 1164px;
        height: 640px;
        animation: rotet 60s linear infinite;
        cursor: pointer;background: url('https://pic2.imgdb.cn/item/6412e92cebf10e5d531beddb.png')0 0/80% 90%;
        opacity: 1;
}
.stop #mpic1 {
animation-play-state: paused;
}

@keyframes rotet {
       0%{
      background-position: 0% 0%;
    }
    100%{
      background-position: 0% 2600%;filter:hue-rotate(360deg)
    }
}
       

</style>
<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;
}
</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>




红影 发表于 2023-5-20 09:11

这么多变色的叶子，很漂亮的制作。欣赏焱鑫磊好帖{:4_187:}

红影 发表于 2023-5-20 09:12

原来暂停是按歌词就可以了{:4_173:}

梦缘 发表于 2023-5-20 16:34

漂亮的制作，欣赏点赞！{:4_187:}

焱鑫磊 发表于 2023-5-20 19:17

红影 发表于 2023-5-20 09:11
这么多变色的叶子，很漂亮的制作。欣赏焱鑫磊好帖

问好红影！{:4_187:}

焱鑫磊 发表于 2023-5-20 19:17

红影 发表于 2023-5-20 09:12
原来暂停是按歌词就可以了

是的红影，问好！{:4_204:}

焱鑫磊 发表于 2023-5-20 19:17

梦缘 发表于 2023-5-20 16:34
漂亮的制作，欣赏点赞！

梦缘好！{:4_204:}

红影 发表于 2023-5-20 20:26

焱鑫磊 发表于 2023-5-20 19:17
是的红影，问好！

问好焱鑫磊，晚上好{:4_187:}
页: [1]
查看完整版本: 《阳光灿烂的一天》黄绮珊