你像桃花三月开 - 【代码图腾】 - 中画网 - Powered by Discuz! Archiver

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

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

你像桃花三月开

<meta name="referrer" content="never" />

<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

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

约会阳光 发表于 2024-5-7 22:47

真漂亮！谢谢分享https://image.hnol.net/c/2024-03/24/10/202403241044451341-4530697.gif

页: [1]

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