论坛 › 【代码图腾】 › 你像桃花三月开

195400 发表于 2024-4-16 09:15

你像桃花三月开

<meta name="referrer" content="never" />
<!-- link rel="stylesheet" href="https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css" charset="utf-8" -->
<style>
.lrcShow{font: bold 3em 楷体, 楷体_GB2312;position: absolute;width: 80%;height: 2em;bottom: 0px;left: 10%;color: transparent;filter: drop-shadow(1px 1px 1px white);letter-spacing: 2px;--aniName: bgMove1;--durTime: 100ms;--aniPlayState: running;cursor: pointer;background: repeating-linear-gradient(45deg,white 1px,transparent 2px,gray 4px),repeating-linear-gradient(-45deg, white 1px, transparent 2px, gray 4px);-webkit-background-clip: text}.lrcShow::before{position: absolute;content: attr(data-lrc);width: 0;height: 100%;left: 0;top: 0;color: transparent;color: darkred;background-image: url(https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg);-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%}}
#oBlk {
    width: 1280px;
    height: 800px;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 4px 4px 10px black;
    margin-left: calc(50% - 721px);
}

#bfctl {
    bottom: 2%;
    right: 2%;
    position: absolute;
    overflow: hidden;
    width: 120px;
    height: 120px;
    cursor: pointer;
}

#disc {
    position: absolute;
    top: 0px left:0px;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    border: 2px solid #000;
    background: url('https://pic.imgdb.cn/item/642d9c53a682492fcccad99f.png') center/cover no-repeat, url('https://img1.kuwo.cn/star/starheads/300/60/25/2616944655.jpg')no-repeat center / 45%;
    animation: spin 10s infinite linear;
}

@keyframes spin {
    100% {
      transform: rotate(360deg);
    }
}

#pickupArm {
    position: absolute;
    top: 1%;
    right: 0.5%;
    width: 40px;
    height: 95px;
    background: url('https://pic.imgdb.cn/item/65ffbbe89f345e8d036024a8.png')no-repeat 0px 0px / 100%;
}

.bfpause {
    transform-origin: 100% 0%;
    transform: rotate(-16deg);
}

#indicator {
    position: absolute;
    left: 20%;
    bottom: 10px;
    width: 60%;
    margin: 10px auto;
    appearance: none;
    height: 8px;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

#indicator::-webkit-progress-bar {
    background: pink;
}

#indicator::-webkit-progress-value {
    background: hsl(125, 72%, 72%);
}

.lrcShow {
    font-size: 2em;
    bottom: 10px;
    left: 30%;
}

.lrcShow::before {
    color: transparent;
    background:url('https://img95.699pic.com/xsj/1r/uu/zw.jpg') center/cover;
    -webkit-background-clip: text;
}

/**--------------------------------------**/
.picBox {
    width: 500px;
    height: 800px;
    display: grid;
    place-items: center;
    padding: 4px;
    float: left;
}

.picBox img {
    width: 500px;
    height: 800px;
}

#picBlk {
    width: 3048px;
    height: 808px;
    position: absolute;
    top: 0px;
    left: 0px;
    aaaanimation: mLeft 30s steps(6);
}

#iBlk {
    width: 508px;
    height: 808px;
    overflow: hidden;
    position: relative;
    margin: auto;
    border-radius: 16px;
}

#vid {
    width: 120%;
    position: absolute;
    left: 0px;
    bottom: 0px;
}
</style>
<div id="oBlk">
<video id="vid" src="https://img3.tukuppt.com/video_show/2421007/00/01/99/5b4ec6e9b2913.mp4" loop autoplay muted></video>
<div id="iBlk">
    <div id="picBlk">
      <div class="picBox">
      <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyjVdTLA2Hq6zrxOia1caPtfHlwMgsMNPtSrKDhBLicop2mtiaiakC4oETOw/640" />
      </div>
      <div class="picBox">
      <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyjkK6JI47RWiaQGmE3qdAwuXibMIyribpICAl3WicIfSQf3ZA4Zicn2jIUGA/640" />
      </div>
      <div class="picBox">
      <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyXqyjKG12ACBFXuY7AAqq9KamVHkM26E0lhRdfjKKp8CzK3TP9uHphw/640" />
      </div>
      <div class="picBox">
      <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyiaABwYDSLQia8viaP5pFXwSibngicUicxCC8cE4vp7TsgHOEpVzBr0VjzicLw/640" />
      </div>
      <div class="picBox">
      <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyiczvPeBZXAEtwIHicN5HXbqia5v5Z8Xz8l4icZZHPora3to9FNnGLUt0OQ/640" />
      </div>
      <div class="picBox">
      <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMy7icvqfYficLr6dpu0eKYAtRNu4aAwFspgcsLiaTTGwbWzLZl7nYW0iajOw/640" />
      </div>
    </div>
</div>
<div id="bfctl">
    <div id="disc"></div>
    <div id="pickupArm"></div>
</div>
<div class="lrcShow" data-lrc=""></div>
<progress value='0.0' max='100.0' id='indicator'></progress>
</div>
<script>
var keyFrames = [{
    clipPath: 'ellipse(10% 10% at 50% 50%)',
    opacity: '0.4'
}, {
    clipPath: 'ellipse(30% 30% at 50% 50%)',
    opacity: '0.7',
    offset: 0.3
}, {
    clipPath: 'ellipse(50% 50% at 50% 50%)',
    opacity: '1',
    offset: 0.5
}, {
    clipPath: 'ellipse(75% 75% at 50% 50%)',
    opacity: '0.4',
    offset: 1.0
}, {
    opacity: '0.4'
}];
var EffectTiming = {
    duration: 8000,
    fill: 'forwards'
};
let idx = 0,aniObj = null;
let picBoxes = document.querySelectorAll(".picBox");
/**var sF = document.createElement('script');
sF.src = 'https://file.uhsea.com/2403/7915e4a8279698017eb1625365a4dd6dER.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => {**/
//---------------------------------------------------------
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;}('M H=l(){w 4.Q.1i(4,1j)};H.1k={1f:H,Q:l(v){x=v.B.K(/(^\\s*)|(\\s*$)/g,\'\');4.6=O.1h(\'.1l\');4.u=v.u;4.9=4.R(x);4.P(v.1p)},R:l(x){M o=x.K(/(^\\s*)|(\\s*$)/g,"").S(/\\r|\\n|\\r\\n/);M 7=1m 1n();y(W j=0;j<o.f;j++){W t=o.1o(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);e(t){G=o.15(\']\');e(G>0)B=o.U(G+1);y(m=0;m<t.f;m++){L=t.U(1).K(\']\',\'\').S(/:/);A=(+L)*18+(+L);e(7.f==0&&A!=0){7.T({c:0,C:\'\\1a\\V\\V\\1L\\1M\\1N\\1K\'})}7.T({c:+A.z(2),C:B})}}}7.1I(l(a,b){w(a.c-b.c)});y(k=0;k<7.f-1;k++){7.I=+(7.c-7.c).z(2)}w 7},Z:l(D){4.6.1w=4.6.1x.1y=4.9.C;4.6.i.p(\'--1v\',\'1s\'+(4.8%2));4.6.i.p(\'--D\',D+\'s\');4.6.i.p(\'--E\',\'10\');4.8++},P:l(N){4.5=O.1D("X");4.5.1E=F;4.5.1F=F;4.5.1C=1z;4.5.1A=N;4.6.1B(4.5);4.8=0;4.5.h(\'1u\',()=>{4.8=0;4.5.q()});4.5.h(\'1t\',()=>{4.9.I=+(4.5.11-4.9.c).z(2)});4.5.h(\'q\',()=>{4.6.i.p(\'--E\',\'10\')});4.5.h(\'Y\',()=>{e(4.8==1&&4.5.J<1){4.5.q();w F}4.6.i.p(\'--E\',\'12\')});4.5.h(\'1H\',()=>{1J.1G("X 1d, 19 q 1b 1e");4.6.i.1c=\'17\';4.6.13(4)});4.5.h(\'16\',()=>{e(4.u){4.u.14=4.5.J/4.5.11*1r}e(4.8<4.9.f){e(4.5.J>=4.9.c){4.Z(4.9.I)}}});4.6.h(\'1q\',()=>{e(4.5.12){4.5.q()}1g{4.5.Y()}})}}',62,112,'||||this|mObj|lrcShowObj|lrcs|idx|lrcVec|||seconds||if|length||addEventListener|style|index||function|||parts|setProperty|play|||chkTime|indicator|opts|return|lyricTxt|for|toFixed|_0|lrcTxt|words|durTime|aniPlayState|false|tIdx|lrcPlayerY|dur|currentTime|replace|ta|var|mUrl|document|genPlayer|init|handleLrc|split|push|substr|u0020|let|audio|pause|showLrc|running|duration|paused|removeChild|value|lastIndexOf|timeupdate|none|60|remove|u00A9|start|display|wrong|event|constructor|else|querySelector|apply|arguments|prototype|lrcShow|new|Array|match|audioURL|click|100|bgMove|canplay|ended|aniName|innerHTML|dataset|lrc|true|src|appendChild|autoplay|createElement|loop|muted|log|error|sort|console|u8f7b|u4e5f|u66fe|u5e74'.split('|'),0,{}))
//---------------------------------------------------------
    let lrctxt = `
作词 : 罗皓予\n 作曲 : 凡间精灵\n 你像三月桃花开-许丽静\n 作词：罗皓予\n 作曲：凡间精灵\n 编曲：牛侠\n 明媚春光去又来\n 桃花年年开\n 满山桃花满山爱\n 三月江南入画来\n 我到山里踏青来\n 桃花朵朵开\n 风唱情歌赛啰赛\n 等待你从风中来\n 你像三月桃花开\n 无意撞上我的爱\n 美丽不负春光来\n 点点滴滴都是爱\n 你像三月桃花开\n 无意撞上我的爱\n 青春微笑荡过来\n 丝丝缕缕醉心怀\n 明媚春光去又来\n 桃花年年开\n 满山桃花满山爱\n 三月江南入画来\n 我到山里踏青来\n 桃花朵朵开\n 风唱情歌赛啰赛\n 等待你从风中来\n 你像三月桃花开\n 无意撞上我的爱\n 美丽不负春光来\n 点点滴滴都是爱\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=1434618652.mp3", //
    }
    let playerY = new lrcPlayerY(opts);
    bfctl.onclick = () => {
      playerY.mObj.paused ? (playerY.mObj.play(), pickupArm.classList.remove('bfpause'), disc.style.animationPlayState = 'running', vid.play(), aniObj.play()) : (playerY.mObj.pause(), pickupArm.classList.add('bfpause'), disc.style.animationPlayState = 'paused', vid.pause(), aniObj.pause());
    }
    playerY.mObj.addEventListener('timeupdate', function() {
      if (indicator) {
      indicator.value = this.currentTime / this.duration * 100;
      }
    });

    function move2left() {
      lastIdx = idx - 1;
      if (lastIdx < 0) lastIdx = 5;
      //iBlk.style.background = `url(${picBoxes.querySelector(`img`).src}) no-repeat center /cover`;
      picBlk.style.left = -508 * idx + 'px';
      aniObj = picBoxes.animate(keyFrames, EffectTiming);
      aniObj.onfinish = move2left;
      idx++;
      idx %= 6;
    }
    move2left();
//}
</script>

容轩听雨 发表于 2024-4-21 10:53

嵌入的视频挺美，编写的代码播放器炫丽，歌曲甜美，令人陶醉，赞一个！问好老师，春祺！

查看完整版本: 你像桃花三月开