多层叠加画面倒影【你是我唯一的依靠】
本帖最后由 亚伦影音工作室 于 2026-3-29 05:09 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa {margin: 10px -320px;width: 1286px;height: 1200px;background:#000 url()no-repeat center/cover;position: relative;z-index: 1;overflow: hidden;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
#dtb{margin: 10%350px;z-index:1;
width: 150px;
height:150px;
position: absolute;
}
#dtb img{
-webkit-box-reflect: below 700px -webkit-gradient(linear, 0% 100%,100% 100%, from(rgba(255,255,255,0.6)), to(#00ff00));
width: 100%;
height:100%;
}
#pa {margin: 0px0px;
width: 100%;
height: 100%;
background:#000;
position: absolute;
overflow: hidden;
}
#tu{ width: 100%;transform: scale(1,1.02);
height: 50%; background:url(https://pic.imgdb.cn/item/65b76cfb871b83018ab9b60e.png) no-repeat 70% 50%/100px 200px,url('https://pic.imgdb.cn/item/65a67b84871b83018a2709d4.png') no-repeat 60% 90%/220px 300px,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b5989127f299e693180bc3eb406a3d16.jpg)no-repeat center/cover;
}
#reflect { width: 100%;transform: scale(1);
height: 50%; background:url(https://pic.imgdb.cn/item/65b76cfb871b83018ab9b60e.png) no-repeat 70% 50%/100px 200px,url('https://pic.imgdb.cn/item/65a67b84871b83018a2709d4.png') no-repeat 60% 90%/220px 300px,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b5989127f299e693180bc3eb406a3d16.jpg)no-repeat center/cover;
filter: url(#water)blur(1px);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:10%;top: 25%;width:53%; font-weight:390;font-size:1.8em;z-index: 9; transform:perspective(0px)rotateY(0deg);-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent,transparent,transparent,transparent 1%,rgba(255,255,255,1))}
#player {position:absolute;top: 42%;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="dtb">
<img src="https://ff.xiaoqiaodali.top:5401/i/2026/03/10/69af0de0d8916.gif"id="IMGb" />
</div>
<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="20" result="noise2">
<animate attributeName="values" from="700" to="10" dur="3s" repeatCount="indefinite"/>
</feColorMatrix>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="9" 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.imageb= document.getElementById("IMGb");
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();that.imageb.play()}else{that.mObj.pause();that.image.classList.add('stop');that.reflect.pauseAnimations();that.imageb.stop()}}; 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://file.uhsea.com/2603/1de37d293de0b27a099bca3a2fb7eddcMU.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>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 洢canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
//
imageb.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
//
var width = this.width, height = this.height;
if (width && height) {
// 洢
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvasС
canvas.width = width;
canvas.height = height;
//
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
//
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
//
this.removeAttribute('src');
// canvas
canvas.style.position = 'absolute';
//
this.parentElement.insertBefore(canvas, this);
//
this.style.opacity = '0';
// 洢canvas
this.storeCanvas = canvas;
}
}
};
}
var imageb= document.getElementById("IMGb");
</script>
多层叠加效果奇妙、逼真、自然，恭喜亚伦老师再创新高{:4_176:} 貌似这幅音画已经变成三维的了，手艺绝了！ 倒影（特别是字幕）真漂亮。 漂亮的倒影效果，连歌词同步也都有倒影，如此那两只鸟儿好像少了倒影呢{:4_173:}
欣赏亚伦老师好帖{:4_199:} 红影 发表于 2026-3-28 20:36
漂亮的倒影效果，连歌词同步也都有倒影，如此那两只鸟儿好像少了倒影呢
欣赏亚伦老师好帖{:4_199 ...
做了修改！ 亚纶这个倒影制作漂亮{:4_199:} 好美好，欣赏！ 亚伦影音工作室 发表于 2026-3-28 22:12
做了修改！
看到了，亚伦老师辛苦了{:4_187:}
页:
[1]