我在清晰的水中
本帖最后由 亚伦影音工作室 于 2026-10-9 22:17 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa {left: -165px;width: 1186px;height: 2100px;background: #000;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(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213462674835656.gif)0 0/40% 30%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/8e33c4ba0a788c7e1ee7b5f4ca233f03.jpg)no-repeat center/cover;
filter: url(#water)blur(0px)brightness(240%)contrast(110%)grayscale(10%);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:26%;top: 15%;width:62%;font-weight:300;font-size:2em;z-index: 9;}
#player {position:absolute;top: 82%;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 .006" numOctaves="–2" result="noise1"></feTurbulence>
<feColorMatrix in="noise1" type="hueRotate" values="2" result="noise2">
<animate attributeName="values" from="0" to="720" dur="1.8s" repeatCount="indefinite"/>
</feColorMatrix>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" 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:"https://music.163.com/song/media/outer/url?id=3439718248.mp3", // 姝屾洸閾炬帴
showLines:8 // 鏄剧ず琛屾暟锛屽彲閫夛紝榛樿涓�1琛�
};
new lrcPlayerM(opts);
let fs = true;
fullscreen.onclick = () => {
if (fs) {
fullscreen.innerText = '退出全屏';
papa.requestFullscreen();
} else {
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
</script> 本帖最后由 亚伦影音工作室 于 2026-10-6 17:04 编辑 <br /><br /><style>
.papa { left: -152px; width: 1186px; height: 680px; border-radius: 6px; background:#000 url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213462674835656.gif)0 0/40% 100%; overflow: hidden; box-shadow: 4px 4px 8px #000; position: relative; }
.photo{
width: 100%;
height: 100%;
position: absolute;top:0px; left:0px;
animation: round 16s infinite;
opacity: 0;
}
@keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
img:nth-child(1) {
animation-delay: 12s;
}
img:nth-child(2) {
animation-delay: 8s;
}
img:nth-child(3) {
animation-delay: 4s;
}
img:nth-child(4) {
animation-delay: 0s;
}
</style>
<div class='papa'>
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/71ffec53bb67ec510bac752ce1c5ea25.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9b97b03e68b10f92144f96a2d124d66b.png" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/4f500524d240b5ee5fd23de1c070e3fa.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/bd6b63dd6cbd6efb2f94f6bce346ce20.jpg" alt="" />
</div>
欣赏亚伦老师带来的精彩播放器！ 亚伦影音工作室 发表于 2026-10-9 22:17
本帖最后由 亚伦影音工作室 于 2026-10-6 17:04 编辑
.papa { left: -152px; width: 1186px; height: 680 ...
图片转换自然流畅，谢谢亚伦老师分享！ 好听好看，特效漂亮，谢谢亚伦老师精彩分享
页:
[1]