今夜为谁醉-小町
本帖最后由 亚伦影音工作室 于 2026-5-22 02:47 编辑 <br /><br /><style>#papa {margin: 10px -300px;width: 1164px;height: 620px;background:#000 url()no-repeat center/cover;position: relative;z-index: 1;overflow: hidden;}
#tu{position: absolute;top:0%; left:0%;width: 100%;height: 100%;}
#tu img{width: 100%;}
#fullscreen { opacity:1;position: absolute; width: 20px; height: 20px;top:4%; cursor: pointer;right:4%;z-index: 40;filter:invert(0%);}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 20px; height: 20px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 20px; height: 20px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
.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(0deg, #e56420, #ff0000, #000078, #00ff00, #ff0000);writing-mode: vertical-lr;white-space: pre;}
.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:100%;height:0%;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; gap: 4px; }
@keyframes bgMove1{from { height: 0; }to { height: 100%; } }@keyframes bgMove0{from { height: 0;} to { height: 100%; } }
.LRCShow{position:absolute;left:10%;top: 5%;width:80px;height:90%;display: flex;justify-content: center; align-items: center;font:10 1.8em/0em "方正舒体","SimHei", "Arial", "sans-serif"; letter-spacing: 6px;white-space: nowrap;opacity: 1;animation: fadeIn 2s var(--delay) forwards;}
@keyframes fadeIn {
100% {
transform: translate(0, 0%);
opacity: 0;
}
}
#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;}
</style>
<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.imagee=document.getElementById('tetimg');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();image.play();that.imagee.classList.remove('stop')}else{that.mObj.pause();image.stop();that.imagee.classList.add('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>
<!------ 以下为定制部分 ---->
<divid="papa" >
<div id="tu">
<img src="https://pic1.imgdb.cn/item/6a0a600142582d261d25bebe.gif"id="tetimg" />
</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>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
</div>
<script type="text/javascript">
let lrctxt = `亚伦音画《今夜为谁醉》
小町演唱
何不轻轻喝一杯
管他爱情为了谁
酒惆怅花正蕾
莫为伊人心儿碎
时光匆匆似流水
青春一去不再回
但求今夜的宿醉
忘记那伤悲
何必再去强求凑一对
出品 亚伦影音工作室
何不轻轻喝一杯
管他爱情为了谁
酒惆怅花正蕾
莫为伊人心儿碎
时光匆匆似流水
青春一去不再回
但求今夜的宿醉
忘记那伤悲
何必再去强求凑一对
出品 亚伦影音工作室
时光匆匆似流水
青春一去不再回
但求今夜的宿醉
忘记那伤悲
何必再去强求凑一对
出品 亚伦影音工作室
`;
var opts = {
lrcDoc:lrctxt, // 存放lrc歌词的变量名
audioURL:"https://www.djdvd.com/plug/down.php?ac=music&id=646d4e6f6147313461323175&.mp3", // 歌曲链接
showLines:1 // 显示行数，可选，默认为1行
};
new lrcPlayerM(opts);
</script>
<script>
let fs= true;
fullscreen.onclick = () => {
fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
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;
//
image.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 image= document.getElementById("tetimg");
</script>
效果漂亮，别出心裁，谢谢亚伦老师精彩分享{:4_190:} 欣赏精彩制作，问好亚伦朋友。 漂亮，酒杯里的美女头像轮播。{:4_187:}
暂停时发现不是任意帧，才发现这个动态是动图，还以为是视频呢{:4_173:} 欣赏亚伦老师好帖{:4_199:}
页:
[1]