王菲 - 棋子【学习小辣椒老师、时间指针音频效果】
<style>
#papa { position: relative; width: 1400px; height: 780px; background: #000 url('https://file.uhsea.com/2409/474493f74eaa6b39fa9ab89e8261331aSS.jpg ');
box-shadow: 4px 4px 10px #000; z-index: 1; margin: 140px 0 48px calc(50% - 781px);overflow:hidden; border-radius:32px;}
#Player { position: absolute; cursor: pointer; transition: 1.2s; animation: rot 8s linear infinite var(--state); z-index:10;}
#Player:nth-of-type(1) {width: 80px; height: 80px; left: 82%; bottom: 3%; --deg: 1turn; }
#Player:hover { filter: hue-rotate(60deg) drop-shadow(0 0 28px #000); --state: paused; }
@keyframes rot { to { transform: rotate(var(--deg)); } }
.dancer { position: absolute; cursor: pointer;z-index:1;}
.lrcShow{font:normal 32px sans-serif;position:absolute;top:88%;left:40%;color:transparent;filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;z-index:999;}
.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;background-image:linear-gradient(45deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(0,100%,50%));-webkit-background-clip:text;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%;}}
@keyframes bgMove0{from{width:0;}to{width:100%;}}
</style>
<div id="papa">
<img id="Player" src="https://cccimg.com/view.php/ed0baf03dc0cf641286928653adbce1f.png" alt="" title="暂停">
<img class="dancer" src="https://cccimg.com/view.php/538e01705500d459be7daae1ee624563.gif" alt="" style="left: 0px; top: 0px; ">
<img class="dancer" src="https://webftp-bbs.hnol.net/yx2021//pj155/20240801142512.gif" style="width: 300px; height: 150px;left: 101px; top: 620px;">
<img class="dancer" src="https://cccimg.com/view.php/c034771f7508695aa3176b1498c09f11.png" alt="" style="width: 250px; height: 133px;left: 400px; top: 100px;">
<img class="dancer" src="https://webftp-bbs.hnol.net/yx2021//pj155/20231112124430.jpg " alt="" style="left: 860px; top: 220px;">
<div class="lrcShow" data-lrc="棋子">棋子</div>
</div>
<script>
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('6(\'d\'n c.a(\'2\')){j.l.q=b(){6(1.7){1.7.h.p(1.7);1.7=o;1.3.i=\'\'}6(1.9){1.8=1.9}};j.l.m=b(){g 2=c.a(\'2\');g 4=1.4,5=1.5;6(4&5){6(!1.9){1.9=1.8}2.4=4;2.5=5;2.3.k=1.3.k;2.3.f=1.3.f;2.d(\'z\').y(1,0,0,4,5);x{1.8=2.A("B/t")}s(e){1.r(\'8\');2.3.w=\'v\';1.h.u(2,1);1.3.i=\'0\';1.7=2}}}}',38,38,'|this|canvas|style|width|height|if|storeCanvas|src|storeUrl|createElement|function|document|getContext||top|var|parentElement|opacity|HTMLImageElement|left|prototype|stop|in|null|removeChild|play|removeAttribute|catch|gif|insertBefore|absolute|position|try|drawImage|2d|toDataURL|image'.split('|'),0,{}))
//-----------------------------------------------------------------
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('t y=7(){w 4.T.1d(4,1f)};y.1r={1i:y,T:7(C){x=C.A.J(/(^\\s*)|(\\s*$)/g,\'\');4.8=O.1k(\'.1l\');4.e=4.Q(x);4.P(C.1g)},Q:7(x){t p=x.J(/(^\\s*)|(\\s*$)/g,"").V(/\\r|\\n|\\r\\n/);t 9=1p 1q();F(M l=0;l<p.j;l++){M v=p.1m(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);i(v){H=p.1n(\']\');i(H>0)A=p.U(H+1);F(m=0;m<v.j;m++){L=v.U(1).J(\']\',\'\').V(/:/);B=(+L)*1e+(+L);i(9.j==0&&B!=0){9.S({f:0,G:\'\\1a\\R\\R\\1K\\1L\\1J\\1F\'})}9.S({f:+B.D(2),G:A})}}}9.1H(7(a,b){w(a.f-b.f)});F(k=0;k<9.j-1;k++){9.K=+(9.f-9.f).D(2)}10.Z(9);w 9},X:7(E){4.8.1G=4.8.1M.1v=4.e.G;4.8.o.u(\'--1w\',\'1x\'+(4.c%2));4.8.o.u(\'--E\',E+\'s\');4.8.o.u(\'--I\',\'11\');4.c++},P:7(N){4.6=O.1u("12");4.6.1y=z;4.6.1C=z;4.6.1D=1E;4.6.1z=N;4.8.1B(4.6);t 5=4;t 1b=0;4.c=0;4.6.h(\'1A\',7(){5.c=0;4.q()});4.6.h(\'1t\',7(){5.e.K=+(4.1s-5.e.f).D(2);});4.6.h(\'q\',7(){5.8.o.u(\'--I\',\'11\')});4.6.h(\'13\',7(){i(5.c==1&&4.W<1){5.6.q();w z}5.8.o.u(\'--I\',\'Y\')});4.6.h(\'1I\',7(){10.Z("12 1c, 19 q 15 14");5.8.o.17=\'16\';5.8.18(4)});4.6.h(\'1o\',7(){i(5.c<5.e.j){i(4.W>=5.e.f){5.X(5.e.K)}}});4.8.h(\'1h\',7(){i(5.6.Y){5.6.q()}1j{5.6.13()}})}}',62,111,'||||this|that|mObj|function|lrcShowObj|lrcs|||idx||lrcVec|seconds||addEventListener|if|length||index|||style|parts|play|||var|setProperty|chkTime|return|lyricTxt|lrcPlayerY|false|lrcTxt|_0|opts|toFixed|durTime|for|words|tIdx|aniPlayState|replace|dur|ta|let|mUrl|document|genPlayer|handleLrc|u0020|push|init|substr|split|currentTime|showLrc|paused|log|console|running|audio|pause|event|start|none|display|removeChild|remove|u00A9|turn|wrong|apply|60|arguments|audioURL|click|constructor|else|querySelector|lrcShow|match|lastIndexOf|timeupdate|new|Array|prototype|duration|canplay|createElement|lrc|aniName|bgMove|loop|src|ended|appendChild|muted|autoplay|true|u8f7b|innerHTML|sort|error|u5e74|u4e5f|u66fe|dataset'.split('|'),0,{}))
let lrctxt = `
棋子 - 王菲
词：潘丽玉
曲：杨明煌
想走出你控制的领域
却走近你安排的战局
我没有坚强的防备
也没有后路可以退
想逃离你布下的陷阱
却陷入了另一个困境
我没有决定输赢的勇气
也没有逃脱的幸运
我像是一颗棋
进退任由你决定
我不是你眼中唯一将领
却是不起眼的小兵
我像是一颗棋子
来去全不由自己
举手无回你从不曾犹豫
我却受控在你手里
想走出你控制的领域
却走近你安排的战局
我没有坚强的防备
也没有后路可以退
想逃离你布下的陷阱
却陷入了另一个困境
我没有决定输赢的勇气
也没有逃脱的幸运
我像是一颗棋
进退任由你决定
我不是你眼中唯一将领
却是不起眼的小兵
我像是一颗棋子
来去全不由自己
举手无回你从不曾犹豫
我却受控在你手里
我像是一颗棋子
来去全不由自己
举手无回你从不曾犹豫
我却受控在你手里
我却受控在你手里
我却受控在你手里
`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://cccimg.com/view.php/8f50047be82fed79b96d455c002c9dcb.mp3"
}
let yP = new lrcPlayerY(opts);
//-----------------------------------------------------------------------------------------------------//
var dancers = document.querySelectorAll('.dancer');
var mState = () => {
papa.style.setProperty('--state', yP.mObj.paused ? 'paused' : 'running');
Player.title = yP.mObj.paused ? '播放' : '暂停';
dancers.forEach(dancer => yP.mObj.paused ? dancer.stop() : dancer.play());
};
Player.onclick = () => {
yP.mObj.paused ? (yP.mObj.play()) :
(yP.mObj.pause());
}
yP.mObj.onplaying = yP.mObj.onpause = () => mState();
</script>
图片格式有错误，我先发帖，再回过来看看 这个效果纯动图可以一键停止的，你现在点击不能停止，主要是你图片格式有错误。
第一个链接应该是背景jpg下面加这个动图的gif格式，岩新再仔细看看 漂亮，小播还弄了个帅字，有趣。
欣赏新新好帖{:4_199:} 岩新我给你改好了，你进去看看，发帖的时候溢出码不要加进去
现在可以一键停止动图了
{:4_199:}欣赏！
页:
[1]