十二生肖闯江湖

起个网名好难 发表于 2024-7-16 19:22

本帖最后由起个网名好难于 2024-7-17 11:52 编辑 <br /><br /><meta name="referrer" content="never" />
<style>
#oBlk{--w:1224px;--h:765px;width:var(--w);height:var(--h);background:url(https://p.ssl.qhimg.com/t01b1d3bdc37fd0eb0f.jpg) no-repeat center / cover;margin:32px 0 32px calc(50% - 693px);overflow:hidden;border-radius:32px;box-shadow:4px 4px 10px black;position:relative;.mPic{width:210px;height:350px;offset-path:path("M 1440 350 C 725 0 425 800 -240 -30 h -1320");offset-rotate:0deg;overflow:hidden;border-radius:32px;box-shadow:3px 3px 6px black;animation:sp 60s linear infinite forwards;position:absolute;left:-110px;top:0px;opacity:0.7;}.mPic:nth-of-type(1){animation-delay:0s;}.mPic:nth-of-type(2){animation-delay:5s;}.mPic:nth-of-type(3){animation-delay:10s;}.mPic:nth-of-type(4){animation-delay:15s;}.mPic:nth-of-type(5){animation-delay:20s;}.mPic:nth-of-type(6){animation-delay:25s;}.mPic:nth-of-type(7){animation-delay:30s;}.mPic:nth-of-type(8){animation-delay:35s;}.mPic:nth-of-type(9){animation-delay:40s;}.mPic:nth-of-type(10){animation-delay:45s;}.mPic:nth-of-type(11){animation-delay:50s;}.mPic:nth-of-type(12){animation-delay:55s;}.lrcShow{font:normal 30px sans-serif;position:absolute;left:30%;top:20px;z-index:9;color:transparent;filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;}.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;background-image:url(https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg);-webkit-background-clip:text;background-clip:text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}.slider{-webkit-appearance:none;width:60%;height:8px;background:pink;outline:none;opacity:0.5;-webkit-transition:.2s;transition:opacity .2s;border-radius:5px;position:absolute;left:20%;bottom:16px;z-index:100;}.slider:hover{opacity:1;}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:#4CAF50;cursor:pointer;border-radius:50%;}.progMeter{position:absolute;bottom:30px;left:50%;color:hsl(240,80%,40%);font-size:smaller;font-weight:600;}}@keyframes sp{from{offset-distance:0%}to{offset-distance:100%}}@keyframes bgMove0{from{width:0%;}to{width:100%;}}@keyframes bgMove1{from{width:0%;}to{width:100%;}}</style>
<div id="oBlk">
<img class="mPic" src="https://mmbiz.qpic.cn/mmbiz_png/1ciavibic3ZCjPzFKCN9n1JqgMDWwZMzLRaKThKwGReX1O9Lp6v99lKXleeMyTB2ptTfWQ9FsPUHIuJwCAoO5icpYw/640" />
<img class="mPic" src="https://mmbiz.qpic.cn/mmbiz_png/1ciavibic3ZCjPzFKCN9n1JqgMDWwZMzLRa4PxLtwk4s7zaxTu0gHhEYibsz0AO3icLdDK8vTHG6UK98lKibnnVUJrBA/640" />
<img class="mPic" src="https://mmbiz.qpic.cn/mmbiz_png/1ciavibic3ZCjPzFKCN9n1JqgMDWwZMzLRa8ngFOq0iaKib80L5FibsWVl5nIrTN8MDdCEVwjDccDRWtUlfKumOAPoZg/640" />
<img class="mPic" src="https://mmbiz.qpic.cn/mmbiz_png/1ciavibic3ZCjPzFKCN9n1JqgMDWwZMzLRaWmpIgM8GHjeTBQNq6nCVicuibz7tib1S0CcaIg8D4Riaiamy23Bx3Bkw9ew/640" >
<img class="mPic" src="https://mmbiz.qpic.cn/mmbiz_png/1ciavibic3ZCjPzFKCN9n1JqgMDWwZMzLRaWicsWuN5OGxJUmRSLiab8o0xmFTaRYhc0xghbEgZiaOufYzr1ZuSyzlzQ/640" />
<img class="mPic" src="https://mmbiz.qpic.cn/mmbiz_png/1ciavibic3ZCjPzFKCN9n1JqgMDWwZMzLRazKYef6nIaJLTodWpfwtfqSUoTib5BZyIEUKKPUc8vUAoO1WVPzStkEw/640" />

<img class="mPic" src="https://mmbiz.qpic.cn/mmbiz_png/1ciavibic3ZCjPVlRyTVekCw0N9X8L3FJyYeickGj2ibCms8ibuE2Hib5TibZEYl7vLK3pyJAQ8NdFgJkic4rE6viaNJ0CzA/640" />
<img class="mPic" src="https://mmbiz.qpic.cn/mmbiz_png/1ciavibic3ZCjPVlRyTVekCw0N9X8L3FJyYDtJmmg8v77KBBO35L9Hu6ibxMWrarBicZmvso7Zrz1AEhWBvQcvhHnpw/640" />
<img class="mPic" src="https://mmbiz.qpic.cn/mmbiz_png/1ciavibic3ZCjPVlRyTVekCw0N9X8L3FJyYic40mXRZastQ2Hibtapge5UjEZQJsicXHOcwJpa0xZBaY3dONk1svCFibQ/640"/>
<img class="mPic" src="https://mmbiz.qpic.cn/mmbiz_png/1ciavibic3ZCjPVlRyTVekCw0N9X8L3FJyYUxeEicQDLhr3Klzibn4zYKga4miatyDoZdPNNvVb9W9DmFnSkeicX4KU7g/640"/>
<img class="mPic" src="https://mmbiz.qpic.cn/mmbiz_png/1ciavibic3ZCjPVlRyTVekCw0N9X8L3FJyY5ibLqyghxEQ9kmJQIhAeD8461cYJrp8o4wY7h0UIlY9xhGick03hCicdQ/640"/>
<img class="mPic" src="https://mmbiz.qpic.cn/mmbiz_png/1ciavibic3ZCjPVlRyTVekCw0N9X8L3FJyYKnshhJUEM4uHq6icxkjQKgkXLuKLqc41UPLJelfh7XVM5p1my5jfiaSA/640"/>

<div class="lrcShow" data-lrc="十二生肖闯江湖" >十二生肖闯江湖</div>
<label class="progMeter">0%</label>
<input type="range" min="0" max="100" value="0" class="slider" id="myRange">
</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;}('G S=o(){B 4.U.1l(4,1i)};S.1j={1k:S,U:o(P){z=P.T.H(/(^\\s*)|(\\s*$)/g,\'\');4.6=y.R(\'.1f\');4.i=y.R(\'.1g\');4.E=y.R(\'.E\');4.7=4.14(z);4.15(P.1h);4.A=p},14:o(z){G q=z.H(/(^\\s*)|(\\s*$)/g,"").10(/\\r|\\n|\\r\\n/);G 9=1p 1q();D(12 l=0;l<q.h;l++){12 w=q.1r(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);f(w){J=q.1m(\']\');f(J>0)T=q.Z(J+1);D(m=0;m<w.h;m++){I=w.Z(1).H(\']\',\'\').10(/:/);L=(+I)*1n+(+I);f(9.h==0&&L!=0){9.V({8:0,M:\'\\1o\\Y\\Y\\1e\\1a\\1c\\1d\'})}9.V({8:+L.C(2),M:T})}}}9.1b(o(a,b){B(a.8-b.8)});D(k=0;k<9.h-1;k++){9.Q=+(9.8-9.8).C(2)}B 9},17:o(F){4.6.13=4.6.1W.1V=4.7.M;4.6.j.t(\'--1K\',\'1P\'+(4.c%2));4.6.j.t(\'--F\',F+\'s\');4.6.j.t(\'--K\',\'W\');4.c++},15:o(X){4.5=y.1Q("16");4.5.1N=p;4.5.1T=p;4.5.1L=18;4.5.1M=X;4.6.1U(4.5);4.c=0;4.5.e(\'1R\',()=>{4.c=0;4.5.u()});4.5.e(\'1S\',()=>{4.7.Q=+(4.5.O-4.7.8).C(2)});4.5.e(\'u\',()=>{4.6.j.t(\'--K\',\'W\')});4.5.e(\'19\',()=>{f(4.c==1&&4.5.v<1){4.5.u();B p}4.6.j.t(\'--K\',\'11\')});4.5.e(\'1J\',()=>{1x.1w("16 1z, 1O u 1t 1s");4.6.j.1v=\'1u\';4.6.1A(4)});4.5.e(\'1G\',()=>{f(!4.A){4.i.N=4.5.v/4.5.O*1F;4.E.13=4.i.N+\'%\'}f(4.c<4.7.h){f(4.5.v>=4.7.8){4.17(4.7.Q)}}});4.6.e(\'1I\',()=>{f(4.5.11){4.5.u()}1H{4.5.19()}});4.i.e(\'1C\',()=>4.A=18);4.i.e(\'1B\',()=>4.A=p);4.i.e(\'1E\',()=>{x=(4.i.N/4.i.1D*4.5.O).C(2);D(n=0;n<4.7.h-1;n++){f(x>=4.7.8&&x<4.7.8){4.5.v=x;4.c=n;1y}}})}}',62,121,'||||this|mObj|lrcShowObj|lrcVec|seconds|lrcs|||idx||addEventListener|if||length|indicator|style||index|||function|false|parts|||setProperty|play|currentTime|chkTime|seekTime|document|lyricTxt|mseek|return|toFixed|for|progMeter|durTime|var|replace|ta|tIdx|aniPlayState|_0|words|value|duration|opts|dur|querySelector|lrcPlayerY|lrcTxt|init|push|running|mUrl|u0020|substr|split|paused|let|innerHTML|handleLrc|genPlayer|audio|showLrc|true|pause|u66fe|sort|u5e74|u8f7b|u4e5f|lrcShow|slider|audioURL|arguments|prototype|constructor|apply|lastIndexOf|60|u00A9|new|Array|match|event|start|none|display|log|console|break|wrong|removeChild|mouseup|mousedown|max|change|100|timeupdate|else|click|error|aniName|autoplay|src|loop|remove|bgMove|createElement|ended|canplay|muted|appendChild|lrc|dataset'.split('|'),0,{}))
{
let lrctxt = `
作词 : 丁亮/侯喆\n 作曲 : 卓乐\n鼠牛功夫高虎兔胆气豪\n龙在左蛇在右马羊匆匆齐来到\n猴鸡相召唤狗猪来帮忙\n十二大侠赛金刚十二大侠赛金刚\n一曲闯江湖伴着沧海声声笑\n千年古老的传说留一段荡气回肠\n猪狗来无影鸡猴去无踪\n羊在西马在东神龙出没一阵风\n虎兔南北通鼠牛摆正中\n十二大侠有神功十二大侠有神功\n耍一段南拳北腿中华好武功\n唱一曲南腔北调神州好逍遥\n春夏秋冬踏遍天涯路江湖多逍遥\n`;

   let opts = {
            lrcTxt:lrctxt,

            audioURL:"https://music.163.com/song/media/outer/url?id=2091668869.mp3"
   }
   let yP = new lrcPlayerY(opts);
let apics = oBlk.querySelectorAll('.mPic');
for(let n = 0; n < apics.length; n++) {
apics.onmouseover = () => {
for(let k = 0 ; k < apics.length; k++) apics.style.animationPlayState = 'paused';
apics.style.transform = 'scale(1.5)';
}
apics.onmouseout = () => {
for(let k = 0 ; k < apics.length; k++) apics.style.animationPlayState = 'running';
apics.style.transform = 'scale(1)';
}
}
}
</script>

红影发表于 2024-7-16 19:40

小图沿着设定曲线一幅幅轮番登场，这制作真漂亮。欣赏难难好帖{:4_199:}

红影发表于 2024-7-16 19:43

边听歌曲赏帖子，边复习十二生肖了，这个帖子真好{:4_199:}

起个网名好难 发表于 2024-7-16 20:20

红影发表于 2024-7-16 19:40
小图沿着设定曲线一幅幅轮番登场，这制作真漂亮。欣赏难难好帖

谢谢支持欣赏！

晚上好！

起个网名好难 发表于 2024-7-16 20:35

红影发表于 2024-7-16 19:43
边听歌曲赏帖子，边复习十二生肖了，这个帖子真好

刚好找到一组图片，想着试试沿路径移动但效果并不理想，看来是还没吃透path{:5_102:}

醉美水芙蓉 发表于 2024-7-16 20:48

小辣椒 发表于 2024-7-16 20:56

欣赏难难精彩的制作，绝对的代码高手{:4_178:}

红影发表于 2024-7-16 21:28

起个网名好难发表于 2024-7-16 20:20
谢谢支持欣赏！

晚上好！

这个无论是歌曲还是图图都特别好呢，可以学习生肖排序了，我总记不住十二生肖的顺序{:4_173:}

红影发表于 2024-7-16 21:29

起个网名好难发表于 2024-7-16 20:35
刚好找到一组图片，想着试试沿路径移动但效果并不理想，看来是还没吃透path

挺好啊，能看出沿弧线行进的呢{:4_187:}

起个网名好难 发表于 2024-7-16 22:04

醉美水芙蓉发表于 2024-7-16 20:48
老师这个制作真漂亮！

谢谢支持欣赏！

晚上好！

起个网名好难 发表于 2024-7-16 22:05

小辣椒发表于 2024-7-16 20:56
欣赏难难精彩的制作，绝对的代码高手

谢谢支持欣赏！

晚上好！

起个网名好难 发表于 2024-7-16 22:06

红影发表于 2024-7-16 21:29
挺好啊，能看出沿弧线行进的呢

弯得不够漂亮{:5_102:}

梦江南 发表于 2024-7-17 11:29

欣赏老师精彩制作！

起个网名好难 发表于 2024-7-17 11:36

梦江南发表于 2024-7-17 11:29
欣赏老师精彩制作！

谢谢支持欣赏！

上午好！

老谟深虑 发表于 2024-7-17 16:08

欣赏老师的精美制作，点赞！

红影发表于 2024-7-17 17:46

起个网名好难发表于 2024-7-16 22:06
弯得不够漂亮

这样就很好啊，弯得过大就没有现在这样起伏的感觉了呢{:4_187:}

起个网名好难 发表于 2024-7-17 19:08

老谟深虑发表于 2024-7-17 16:08
欣赏老师的精美制作，点赞！

谢谢支持欣赏！

晚上好！

起个网名好难 发表于 2024-7-17 19:10

红影发表于 2024-7-17 17:46
这样就很好啊，弯得过大就没有现在这样起伏的感觉了呢

今天又调整了下，自我感觉还可以。

红影发表于 2024-7-17 19:56

起个网名好难发表于 2024-7-17 19:10
今天又调整了下，自我感觉还可以。

嗯嗯，起伏更明显了呢，漂亮{:4_187:}

竹溪发表于 2024-7-17 22:14

可爱的十二生肖{:4_204:}

页: [1] 2

花潮论坛's Archiver

十二生肖闯江湖