论坛 › 动画音画 › 水中倒影[自创]

亚伦影音工作室 发表于 2026-3-24 22:33

水中倒影[自创]

本帖最后由 亚伦影音工作室 于 2026-3-26 10:18 编辑 <br /><br /><style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa {margin: 10px -300px;width: 1286px;height: 780px;background: url(https://pic1.imgdb.cn/item/693402b4b20847ff2b5dfb4a.jpg)no-repeat center/cover;position: relative;z-index: 1;overflow: hidden;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
#pa {margin: 0px0px;
      width: 1286px;
      height: 780px;
      background:#000;
    transform: scale(1);
      box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;overflow: hidden;position: absolute;
    padding-bottom: 0px;
}
#tu{ width: 100%;transform: scale(1,1.02);
      height: 50%; background:url(https://pic1.imgdb.cn/item/69c1e90aac52b0dbce286f61.jpg)no-repeat center/cover;
    }
#reflect { width: 100%;
      height: 50%; background:url(https://pic1.imgdb.cn/item/69c1e90aac52b0dbce286f61.jpg)no-repeat center/cover;
    filter: url(#water)blur(2px);transform: rotateX(180deg)
}
.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:40%;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:#000;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>
<div id="pa">
<div id="tu"></div>

<svg width="100%" height="50%" id="reflect">
<filter id="water" >
    <feTurbulence type="fractalNoise" baseFrequency=".05 .05" numOctaves="2" result="noise1"></feTurbulence>
    <feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
      <animate attributeName="values" from="0" to="720" dur="2s" repeatCount="indefinite"/>
    </feColorMatrix>
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="10" in="SourceGraphic" in2="noise2" />
</filter>
</svg>
</div>
</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:"https://s2.cldisk.com/sv-w7/audio/70/3f/6d/7cd221ef9671506e58ae1c322bea793b/audio.mp3",        //        歌曲链接
        showLines:6                                //        显示行数，可选，默认为1行
};
new lrcPlayerM(opts);

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

红影 发表于 2026-3-24 22:43

评完分后，发现背景图从单纯的花朵变成花丛里的美女了{:4_173:}

红影 发表于 2026-3-24 22:44

这个真漂亮，欣赏亚伦老师好帖{:4_187:}

亚伦影音工作室 发表于 2026-3-24 22:45

红影 发表于 2026-3-24 22:43
评完分后，发现背景图从单纯的花朵变成花丛里的美女了

在测试

梦油 发表于 2026-3-25 10:08

倒影做得真漂亮。

杨帆 发表于 2026-3-25 15:10

效果越来越逼真，再让全屏状态下正常显示更完美{:4_176:}

红影 发表于 2026-3-26 21:46

亚伦影音工作室 发表于 2026-3-24 22:45
在测试

嗯嗯，发现又换图图了{:4_173:}

查看完整版本: 水中倒影[自创]