亚伦影音工作室 发表于 前天 07:11

黄昏尽晚霞[仿抖音(泪眼汪汪)特效]

本帖最后由 亚伦影音工作室 于 2026-10-5 21:15 编辑 <br /><br /><style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa {margin: 0px -150px;width: 1180px;height: 700px;background: #000 url(https://pic1.imgdb.cn/i/034aKEYQyOTfo34NuxkHY0.jpg)no-repeat center/cover;position: relative;z-index: 1;overflow: hidden;font-family: "Ma Shan Zheng","鍗庢枃琛屾シ","SimHei", "Arial", "sans-serif";}


#reflect { width: 100%;position: absolute;
      height: 100%; background:url(https://pic1.imgdb.cn/i/034aKEYQyOTfo34NuxkHY0.jpg)no-repeat center/cover;
    filter: url(#water)blur(0px)brightness(120%)contrast(120%);transform: rotateX(0deg);
}
.lyricDisp{transition:.3s all ease;text-align:center;color:#000;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);line-height: 50px;--bg:linear-gradient(90deg, #e56420, #ff0000, #000, #800000, #ff0000)}
.lyricDisp:first-child{font-size:1.5em;color:#00aa00;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;text-align:center;line-height: 50px;}
.lyricDisp:first-child::before{position:absolute;content:attr(data-lrc);width:10%;height:100%;color:transparent;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);background: var(--bg);-webkit-background-clip: text;text-align:left;}
@keyframes bgMove1{from{width:0%;}to{width:100%;}}@keyframes bgMove0{from{width:0%}to{width:100%;}}
.LRCShow{position:absolute;left:0%;top: 25%;width:53%;font-weight:390;font-size:1.8em;z-index: 9;}

#player {position:absolute;top: 62%;z-index: 99;
            left: 78%;
width: 160px;
height: 160px;
display: grid;cursor:pointer;
        place-items: center;
animation: rot 8s linear infinite ;

}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
        display: grid;
        place-items: center;
width:35%;
height: 35%;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}

#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
.stop #player{animation-play-state: paused;}
#fullscreen{border-radius: 4px;position: absolute;
color:#fff;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 120;
font-size: 25px;font-weight: 100;
border: none;
cursor: pointer;top: 5px;left: 8%;
}
</style>
<div id="papa">
<div id="fullscreen" title="">全屏欣赏</div>
<div class="LRCShow"></div>
<div id="testImg" >
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
</div>


<svg width="100%" height="100%" id="reflect">

<filter id="water" >
    <feTurbulence type="fractalNoise" baseFrequency=".02 .02" numOctaves="2" result="noise1"></feTurbulence>
    <feColorMatrix in="noise1" type="hueRotate" values="4" result="noise2">
      <animate attributeName="values" from="0" to="720" dur="1.8s" repeatCount="indefinite"/>
    </feColorMatrix>
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="15" in="SourceGraphic" in2="noise2" />
</filter>
</svg>

</div>
<script type="text/javascript">
var lrcPlayerM=function(){return this.init.apply(this,arguments)};lrcPlayerM.prototype={constructor:lrcPlayerM,init:function(opts){this.showLrcObj=document.querySelector('.LRCShow');this.player=document.getElementById('player');this.image=document.getElementById('testImg');this.reflect=document.getElementById('reflect');this.gclines=new Array();this.slines=typeof opts.showLines==='number'?opts.showLines:1;for(k=0;k<this.slines;k++){this.gclines=document.createElement('div');this.gclines.className='lyricDisp';if(this.slines==1&&k==1)this.gclines.style.textAlign='center';this.showLrcObj.appendChild(this.gclines)}this.handleLrc(opts.lrcDoc);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){this.lrcVec=new Array();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;this.play()});this.mObj.addEventListener('playing',function(){that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){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(that.idx>=that.lrcVec.length)return;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)}for(n=1;n<that.slines;n++){if(that.idx+n>=that.lrcVec.length){that.gclines.innerHTML="\u3000"}else{that.gclines.innerHTML=that.lrcVec}}that.idx++}});this.player.onclick=function(){if(that.mObj.paused){that.mObj.play();that.image.classList.remove('stop');that.reflect.unpauseAnimations()}else{that.mObj.pause();that.image.classList.add('stop');that.reflect.pauseAnimations()}};      try{this.mObj.play()}catch(err){console.log(err.message)}},stopMusic:function(){this.mObj.pause();this.mObj.controls=false;},setAudioUrl:function(mUrl){this.mObj.src=mUrl},isMusicEnd:function(){return this.mObj.ended},reStart:function(){this.idx=0;this.mObj.play()}}

</script>

<script type="text/javascript">
let lrctxt = `黄昏尽晚霞- 睡眠火山
制作：亚伦影音工作室
落日染红 天边云霞
晚风轻轻 吹落浮华
半生温柔 都败给时差
美好总是 留不住刹那
余晖缓缓 慢慢落下
人间温柔 只剩一霎
都说夕阳无限好
可惜偏偏近黄昏
万般温柔留不住
只剩孤单锁心门
满眼落日多动人
奈何岁月不留人
繁华落幕风变冷
余生只剩 回忆沉沦
暮色沉沉 遮住星辰
旧事沉沉 刻满伤痕
热烈一程 最终都离分
美好风景 总要落凡尘
晚霞散尽 天色渐深
一腔情深 无人听闻
都说夕阳无限好
可惜偏偏近黄昏
万般温柔留不住
只剩孤单锁心门
满眼落日多动人
奈何岁月不留人
繁华落幕风变冷
余生只剩 回忆沉沦
`;
var opts = {
        lrcDoc:lrctxt,                //        瀛樻斁lrc姝岃瘝鐨勫彉閲忓悕
        audioURL:"http://music.163.com/song/media/outer/url?id=3377739525.mp3",        //        姝屾洸閾炬帴
        showLines:5                                //        鏄剧ず琛屾暟锛屽彲閫夛紝榛樿涓�1琛�
};
new lrcPlayerM(opts);

let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
               papa.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };
</script>

klxf 发表于 前天 16:53

好听好看，特效漂亮，祝亚伦老师国庆长假快乐

醉美水芙蓉 发表于 昨天 07:20

欣赏亚伦老师精彩特效音画！
页: [1]
查看完整版本: 黄昏尽晚霞[仿抖音(泪眼汪汪)特效]