醉美水芙蓉 发表于 2024-12-14 22:17:36

灿烂的你

<style>
#oBlk        {
        --w:960px;--h:600px;
        width:var(--w);height:var(--h);
        margin:20px 32px;
        overflow:hidden;border-radius:32px;
        box-shadow:0px 0px 0px 2px #ffff00, 0px 0px 0px 6px #11EE3D;overflow:hidden;border-radius:6%;
        position:relative;
}
        .picbox        {
                width:500px;height:300px;
                offset-path: path("M 1520 320 C 1000 0 400 1000 -200 120 h -4200");
                offset-rotate: 0deg;
                background-color:hsla(240, 50%, 80%, 0.7);
                overflow:hidden; border-radius:32px;
                box-shadow:3px 3px 6px black;
                animation:sp 120s linear infinite forwards;
                position:absolute; left:0px;top:-100px;
                transition: 1.2s;
        }
        .picbox:nth-of-type(1)        {animation-delay:0s;}
        .picbox:nth-of-type(2)        {animation-delay:15s;}
        .picbox:nth-of-type(3)        {animation-delay:30s;}
        .picbox:nth-of-type(4)        {animation-delay:45s;}
        .picbox:nth-of-type(5)        {animation-delay:60s;}
        .picbox:nth-of-type(6)        {animation-delay:75s;}
        .picbox:nth-of-type(7)        {animation-delay:90s;}
        .picbox:nth-of-type(8)        {animation-delay:105s;}
        .picbox:nth-of-type(9)        {animation-delay:120s;}
       
        .picbox img        {width:500px; height:300px;border-radius:34px;}
        .picbox p        {width:500px; height:10px; text-align:center;font-size:8px;color:black;}
        .picbox p span{font-size:40px;color:brown;}
        .picbox:hover        {transform:scale(2);z-index:99;}
       
        @keyframes sp {from{offset-distance:0%} to{offset-distance:100%}}

        #vid        { width:120%; position:absolute; left:0px; bottom:0px;}
        #splay        {width:120px;height:120px;position:absolute; right:30px;bottom:20px;overflow:hidden;border-radius:50%;box-shadow: inset 0 0 30px gray;
                background:url(https://file.uhsea.com/2408/b3ef85a47c82fa6b5f7da9f8bd6f652eI9.gif) no-repeat center/cover;
                animation:rot 10s linear infinite ;}
        @keyframes        rot {to {transform:rotate(360deg);}}

        .lrcShow{font: normal 2.6em/3.0em 宋体;sans-serif;position:absolute;left:30%;top:490px;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 bgMove0 { from { width: 0%; } to { width: 100%; } }
@keyframes bgMove1 { from { width: 0%; } to { width: 100%; } }
</style>
<div id="oBlk">
        <video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/7abe3fd5095bc1027d571313853692c0.mp4" loop autoplay muted></video>
       
       
        <div class="picbox">
        <img src="https://file.uhsea.com/2408/b3ef85a47c82fa6b5f7da9f8bd6f652eI9.gif" />
       
        </div>
        <div class="picbox">
        <img src="http://qslt.net/data/attachment/forum/202408/11/223321cz8cz2cz8zrr0rcr.jpg" />
       
        </div>
        <div class="picbox">
        <img src="http://qslt.net/data/attachment/forum/202408/13/203708kz2ipo9vfr2z6cz7.jpg" />
       
        </div>
        <div class="picbox">
        <img src="http://qslt.net/data/attachment/forum/202408/11/151645rgb8gbpnp4n09bl8.jpg" />
       
        </div>
        <div class="picbox">
        <img src="http://qslt.net/data/attachment/forum/202408/20/155015omz3t50vetp9azo0.jpg" />
       
        </div>
        <div class="picbox">
        <img src="http://qslt.net/data/attachment/forum/202408/15/130535sa1s79bs955t7a1g.jpg" />
       
        </div>
        <div class="picbox">
        <img src="http://qslt.net/data/attachment/forum/202408/16/185015qsqqi44h5vih5o41.jpg" />
       
        </div>
        <div class="picbox">
        <img src="http://qslt.net/data/attachment/forum/202408/13/100541x5to9x9zq49f29e4.jpg" />
       
        </div>

      <div class="picbox">
        <img src="http://qslt.net/data/attachment/forum/202408/16/154413dpoliu3zz9lcfp9r.jpg" />
       
        </div>
        <div id="splay"></div>
        <!-- audio id="aud" src="https://disk.111t.net/filestores/2024/08/16/e713586e961cb0e4f47061e97cee542a.mp3" loop autoplay ></audio -->
        <div class="lrcShow" data-lrc="灿烂的你(Live 合唱版)" >灿烂的你(Live 合唱版)</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;}('F L=j(){C 4.V.1j(4,1g)};L.1h={1i:L,V:j(R){u=R.P.E(/(^\\s*)|(\\s*$)/g,\'\');4.7=x.S(\'.1d\');4.i=x.S(\'.1e\');4.T=x.S(\'.T\');4.6=4.16(u);4.17(R.1f);4.v=q},16:j(u){F p=u.E(/(^\\s*)|(\\s*$)/g,"").W(/\\r|\\n|\\r\\n/);F 9=1n 1o();z(10 o=0;o<p.h;o++){10 A=p.1p(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);f(A){I=p.1k(\']\');f(I>0)P=p.Z(I+1);z(m=0;m<A.h;m++){J=A.Z(1).E(\']\',\'\').W(/:/);K=(+J)*1l+(+J);f(9.h==0&&K!=0){9.15({c:0,Q:\'\\1m\\X\\X\\1c\\1a\\1b\\19\'})}9.15({c:+K.B(2),Q:P})}}}9.18(j(a,b){C(a.c-b.c)});z(k=0;k<9.h-1;k++){9.O=+(9.c-9.c).B(2)}C 9},13:j(G){4.7.12=4.7.1U.1T=4.6.Q;4.7.l.t(\'--1I\',\'1N\'+(4.8%2));4.7.l.t(\'--G\',G+\'s\');4.7.l.t(\'--H\',\'Y\');4.8++},17:j(U){4.5=x.1O("11");4.5.1L=q;4.5.1R=q;4.5.1J=14;4.5.1K=U;4.7.1S(4.5);4.8=0;4.5.e(\'1P\',()=>{4.8=0;4.5.w()});4.5.e(\'1Q\',()=>{4.6.O=+(4.5.M-4.6.c).B(2)});4.5.e(\'w\',()=>{4.7.l.t(\'--H\',\'Y\')});4.5.e(\'1H\',()=>{f(4.8==1&&4.5.D<1){4.5.w();C q}4.7.l.t(\'--H\',\'1v\')});4.5.e(\'1u\',()=>{1x.1M("11 1r, 1q w 1t 1s");4.7.l.1y=\'1E\';4.7.1D(4)});4.5.e(\'1G\',()=>{f(!4.v){4.i.N=4.5.D/4.5.M*1F;4.T.12=4.i.N+\'%\'}f(4.8<4.6.h){f(4.5.D>=4.6.c){4.13(4.6.O)}}});4.i.e(\'1A\',()=>4.v=14);4.i.e(\'1z\',()=>4.v=q);4.i.e(\'1C\',()=>{y=(4.i.N/4.i.1B*4.5.M).B(2);z(n=0;n<4.6.h-1;n++){f(y>=4.6.c&&y<4.6.c){4.5.D=y;4.8=n;1w}}})}}',62,119,'||||this|mObj|lrcVec|lrcShowObj|idx|lrcs|||seconds||addEventListener|if||length|indicator|function||style|||index|parts|false|||setProperty|lyricTxt|mseek|play|document|seekTime|for|chkTime|toFixed|return|currentTime|replace|var|durTime|aniPlayState|tIdx|ta|_0|lrcPlayerY|duration|value|dur|lrcTxt|words|opts|querySelector|progMeter|mUrl|init|split|u0020|running|substr|let|audio|innerHTML|showLrc|true|push|handleLrc|genPlayer|sort|u8f7b|u66fe|u5e74|u4e5f|lrcShow|slider|audioURL|arguments|prototype|constructor|apply|lastIndexOf|60|u00A9|new|Array|match|remove|wrong|event|start|error|paused|break|console|display|mouseup|mousedown|max|change|removeChild|none|100|timeupdate|pause|aniName|autoplay|src|loop|log|bgMove|createElement|ended|canplay|muted|appendChild|lrc|dataset'.split('|'),0,{}))

let lrctxt = `
[灿烂的你(Live 合唱版)-崔伟立
词：崔伟立
曲：崔伟立
混音：毅然音乐
合唱：毅然合唱团
出品人：崔伟立
推广：汉马文化@小开
LRC编辑：醉美水芙蓉
经过多少次的难关
降临在这人间
流过多少的泪和汗
求一个圆满
人生如沧海里行船
有风雨有雷电
扬起理想的风帆
奔赴长生天的召唤
我们跨过万水越过千山
以梦为马清风为伴
脚步比远方还要远
一路不停勇往直前
我们不惧千难不怕万险
把所有风景都看遍
不负时光不负流年
生命比烟花还灿烂
经过多少次的难关
降临在这人间
流过多少的泪和汗
求一个圆满
人生如沧海里行船
有风雨有雷电
扬起理想的风帆
奔赴长生天的召唤
我们跨过万水越过千山
以梦为马清风为伴
脚步比远方还要远
一路不停勇往直前
我们不惧千难不怕万险
把所有风景都看遍
不负时光不负流年
生命比烟花还灿烂
我们跨过万水越过千山
以梦为马清风为伴
脚步比远方还要远
一路不停勇往直前
我们不惧千难不怕万险
把所有风景都看遍
不负时光不负流年
生命比烟花还灿烂
不负时光不负流年
生命比阳光还灿烂
谢谢欣赏`;
                  
let opts = {
        lrcTxt:lrctxt,
        audioURL:"https://disk.111t.net/filestores/2024/08/16/e713586e961cb0e4f47061e97cee542a.mp3"
}
let yP = new lrcPlayerY(opts);
let pboxes = oBlk.querySelectorAll('.picbox');
pboxes.forEach(item => {
        item.onmouseover = () => {
                pboxes.forEach(ele => ele.style.animationPlayState = 'paused');
                item.style.transform = 'scale(1.5)';
        }
        item.onmouseout = () => {
                pboxes.forEach(ele => ele.style.animationPlayState = 'running');
                item.style.transform = 'scale(1)';
        }
})
splay.onclick = () => {
        yP.mObj.paused ? (yP.mObj.play(), vid.play(), splay.style.animationPlayState = 'running',pboxes.forEach(ele => ele.style.animationPlayState = 'running')) :
                               (yP.mObj.pause(), vid.pause(), splay.style.animationPlayState = 'paused', pboxes.forEach(ele => ele.style.animationPlayState = 'paused'));
}
</script>

klxf 发表于 2024-12-14 23:17:21


背景美，曲子美，满满正能量！谢谢分享

如果移动图片能正常显示，就更美了:lol

醉美水芙蓉 发表于 2024-12-15 17:38:14

klxf 发表于 2024-12-14 23:17
背景美，曲子美，满满正能量！谢谢分享

如果移动图片能正常显示，就更美了 ...

手机能欣赏就没有传图图了！

活跃概况 发表于 2024-12-24 16:06:27

不错！顶LZ
页: [1]
查看完整版本: 灿烂的你