悬溺 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

醉美水芙蓉 发表于 2023-8-17 22:36

悬溺

本帖最后由醉美水芙蓉于 2023-8-17 22:36 编辑 <br /><br /><style type="text/css">
#papa {
margin: auto;
width: 1200px;
height: 620px;
background: #000000 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dba0cb38039a6f2af2f0c043e5280498.jpg') no-repeat center/cover;
margin-top: 20px;
margin-left: -300px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000;
display: grid;
place-items: center;
overflow: hidden;
position: relative;
z-index: 1;
}
.lrcShow{
position: absolute;
top: 520px;
font-family: 华文新魏;
font-size: 48px;z-index: 2;
text-align: center;
display: block;
white-space: nowrap;
color: #000080;
filter: drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color: #FF0000;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
@keyframes bgMove1{from{width:0%;}to{width:100%;filter:hue-rotate(360deg)}}
@keyframes bgMove0{from{width:0;}to{width:100%;}}
.mCtrl{filter: drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);border-radius:0%;display:inline-block;width:90px;height:90px;position:absolute;bottom:30px;left:60px;transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);background: url('https://pic.imgdb.cn/item/63e640e64757feff339cac44.png')0 0/100% 100%;background-position:0 0;background-size:100% 100%;z-index: 3;}
.z360z{animation:rotating 10s linear infinite;}@keyframes rotating{0%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}100%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}}
#screen {width: 100%;
height: 100%;
display: grid;
place-items: center;
overflow: hidden;
position: relative;
z-index: 1;
}
#screen img {
position: absolute;
-ms-interpolation-mode:nearest-neighbor;
image-rendering: optimizeSpeed;
}
</style>
<div id="papa"><divclass="lrcShow"style="margin-left:12px;"></div>
<divid="mDisk" class='mCtrl'></div>
<div id="screen">
<img id="particles" src="http://image.hnol.net/c/2022-01/05/16/202201051650422421-5769293.png" style="visibility:hidden;"></div>

</div>

<script type="text/javascript">
var lrcPlayerY=function(){return this.init.apply(this,arguments)};lrcPlayerY.prototype={constructor:lrcPlayerY,init:function(opts){lyricTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');this.showLrcObj=document.getElementById(opts.lrcShowID);this.audioCtrl=document.getElementById(opts.audioCtrl);this.lrcShowObj=document.getElementsByClassName('lrcShow');this.lrcVec=this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var parts=lyricTxt.replace(/(^\s*)|(\s*$)/g,"").split(/\r|\n|\r\n/);var lrcs=new Array();for(let index=0;index<parts.length;index++){let chkTime=parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=parts.lastIndexOf(']');if(tIdx>0)lrcTxt=parts.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(lrcs.length==0&&_t!=0){lrcs.push({seconds:0,words:'\u00A9\u0020\u0020\u4e5f\u66fe\u5e74\u8f7b'})}lrcs.push({seconds:_t,words:lrcTxt})}}}return lrcs.sort(function(a,b){return(a.seconds-b.seconds)})},showLrc:function(durTime){this.lrcShowObj.innerHTML=this.lrcShowObj.dataset.lrc=this.lrcVec.words;this.lrcShowObj.style.setProperty('--aniName','bgMove'+(this.idx%2));this.lrcShowObj.style.setProperty('--durTime',durTime+'ms');this.lrcShowObj.style.setProperty('--aniPlayState','running');this.idx++},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.autoplay=true;this.mObj.src=mUrl;this.lrcShowObj.appendChild(this.mObj);var that=this;var turn=0;this.idx=0;this.mObj.addEventListener('ended',function(){that.idx=0;that.audioCtrl.classList.remove('z360z');this.play()});this.mObj.addEventListener('play',function(){that.audioCtrl.classList.add('z360z');that.lrcShowObj.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){if(that.idx==1&&this.currentTime<1){that.mObj.play();return false}that.audioCtrl.classList.remove('z360z');that.lrcShowObj.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.lrcShowObj.style.display='none';that.lrcShowObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx<that.lrcVec.length){if(this.currentTime>=that.lrcVec.seconds){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec.seconds-that.lrcVec.seconds)*950)}else{that.showLrc((this.duration-that.lrcVec.seconds)*950)}}}});this.audioCtrl.addEventListener('click',function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}})}}
</script>
<script type="text/javascript">
var lrc =`Dj B Remix - 悬溺
作词：葛东琪
作曲：葛东琪
LRC编辑：醉美水芙蓉
我主张制止不了就放任
这欲望与绝望之争
余温她却喜欢过门
临走呢
还随手关了灯
So funny
Ya i ya i ya i ya i ya i ya i ya
Ya i ya i ya i ya i
Ya i ya i ya i ya i ya i ya i ya
It's so funny ya i ya i
Ya i ya i ya i ya i ya i ya i ya
Ya i ya i ya i ya i
It's so funny ya i ya i ya i ya i ya
Ya i ya i ya i ya i
我主张克制不了就放任
悬上该有的天真
起伏在于喜怒哀乐
松了绳
大不了无人问
Ya i ya i ya i ya i ya i ya i ya
Ya i ya i ya i ya i
Ya i ya i ya i ya i ya i ya i ya
It's so funny ya i ya i
Ya i ya i ya i ya i ya i ya i ya
Ya i ya i ya i ya
It's so funny ya i ya i ya i ya i ya
Ya i ya i ya i ya
有什么话要说
谢谢欣赏！
`;
var opts = {
lrcTxt:lrc,
//lrcShowID:'sLRC',
audioCtrl:'mDisk',
// 歌曲MP3链接放这里
audioURL:'https://www.qqmc.com/up/kwlink.php?id=289669862&.mp3'
};
new lrcPlayerY(opts);
</script>

<script type="text/javascript">
r3d = {
////////////////////////////////::
N : 3.5,
FL : 350,
rY : 1.0,

////////////////////////////////::
O : [],
a : 0,
y : 0,
scr: 0,

init : function ()
{
this.scr = document.getElementById('screen');
this.img = document.getElementById('particles');

document.onselectstart = function () { return false; }
document.ondrag = function () { return false; }

for (var x = -r3d.N; x <= r3d.N; x++)
{
for (var z = -r3d.N; z <= r3d.N; z++)
{
o = document.createElement('img');
o.x3d = x;
o.z3d = z;
o.src = r3d.img.src;
r3d.scr.appendChild(o);
r3d.O.push(o);
}
}
this.scr.onmousemove = function (e)
{
if (window.event) e = window.event;
r3d.xm = e.clientX - r3d.nx;
r3d.ym = e.clientY - r3d.ny;
return false;
}

r3d.resize();
r3d.y = r3d.nh / 2;
r3d.ym = r3d.nh;
r3d.xm = r3d.nw * .9;
r3d.run();
},

resize : function () {
var o = r3d.scr;
r3d.nw = o.offsetWidth / 1.2;
r3d.nh = o.offsetHeight / 1.5;
for (r3d.nx = 0, r3d.ny = 0; o != null; o = o.offsetParent)
{
r3d.nx += o.offsetLeft;
r3d.ny += o.offsetTop;
}
},

run : function ()
{

r3d.a += (r3d.xm - r3d.nw) * .0001;
r3d.y += ((r3d.ym - r3d.nh) - r3d.y) / 40;
var ca = Math.cos(r3d.a);
var sa = Math.sin(r3d.a);

for (var i = 0, o; o = r3d.O; i++)
{
var x = o.x3d * (r3d.nw / 8);
var z = o.z3d * (r3d.nw / 8);
var X = sa * x + ca * z;
var Y = sa * z - ca * x;
var W = r3d.FL / (r3d.FL + Y);
var w = Math.round(W * r3d.nw /8);

o.style.left = Math.round(X * W + r3d.nw - w * .5) + 'px';
o.style.top = Math.round(r3d.y * W + r3d.nh - w * .5) + 'px';
o.style.width= Math.max(2, w) + 'px';
o.style.height = Math.max(6, w * r3d.rY) + 'px';
o.style.zIndex = w;

}
setTimeout(r3d.run, 32);
}

}

onload = function()
{
onresize = r3d.resize;
r3d.init();
}

</script>

红影发表于 2023-8-17 22:51

这画面清清爽爽，很漂亮，欣赏水芙蓉好帖{:4_187:}

醉美水芙蓉 发表于 2023-8-17 22:52

红影发表于 2023-8-17 22:51
这画面清清爽爽，很漂亮，欣赏水芙蓉好帖

红影美女晚上好！

红影发表于 2023-8-17 22:52

这个歌词同步没有后面的微调吧，无法对应上每个字呢。

小文发表于 2023-8-17 22:57

好的摄影

红影发表于 2023-8-18 10:06

醉美水芙蓉发表于 2023-8-17 22:52
红影美女晚上好！

问好水芙蓉美女，上午好{:4_187:}

页: [1]

花潮论坛's Archiver

悬溺