无缘缘的缘

醉美水芙蓉 发表于 2023-5-27 22:34

本帖最后由醉美水芙蓉于 2023-5-27 22:34 编辑 <br /><br /> <style>#papa {
   margin:80px 0 0 calc(50% - 593px);
   width: 1024px;
   height: 640px;
   background: url('https://pic1.imgdb.cn/item/6471eeaaf024cca17342baac.jpg') center/cover no-repeat;
   box-shadow: 3px 3px 20px #000;
   position: relative;
   z-index: 1;
}
.vid { position: absolute; width: 1024px; height: 640px;object-fit: cover; opacity: 1; }
#lrc {
   --motion: cover2;
   --tt: 2s;
   --bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(20, 70%, 50%, .65));
   position: absolute;
   top:550px;
   left:150px;
   font: bold 2em sans-serif;
   color: snow;
   white-space: pre;
   -webkit-background-clip: text;
   filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}
#lrc::before {
   position: absolute;
   content: attr(data-lrc);
   width: 20%;
   height: 100%;
   color: Tomato;
   overflow: hidden;
   white-space: pre;
   background: var(--bg);
   filter: inherit;
   -webkit-background-clip: text;
   animation: var(--motion) var(--tt) linear forwards;
   animation-play-state: var(--state);
}
#wrap {
   position: absolute;
   right: 10px;
   bottom: 10px;
   width: 240px;
   height: 240px;
   cursor: pointer;
   --deg: -15deg;
}
#wrap::before, #wrap::after {
   position: absolute;
   content: '';
}
#wrap::before {
   width: 200px;
   height: 200px;
   background: url('https://638183.freep.cn/638183/t23/btn/ihvf.png') center/cover no-repeat;
   top: -12px;
   right: -12px;
   transition: .12s;
   transform-origin: 180px 20px;
   transform: rotate(var(--deg));
   z-index: 10;
   animation: var(--chg);
}
#wrap::after {
   content: attr(data-tt);
   width: 100%;
   text-align: center;
   color: red;
}
#pan {
   width: 200px;
   height: 200px;
   border-radius: 50%;
   background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
   background-size: 50% 100%, 100% 50%, 100% 100%;
   bottom: 0;
   position: absolute;
   animation: rot 6s infinite linear var(--state);
   --state: paused;
}
#pan::before {
   position: absolute;
   content: '';
   top: 50%; left: 50%;
   margin: -35px;
   border: solid 1px #d9a388;
   width: 68px; height: 68px;
   border-radius: 50%;
   box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
   background: #b5ac9a;
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }</style>
<div id="papa">
<video class="vid" src="https://img-baofun.zhhainiao.com/fs/scene/preview_video/02c94bb274075815a2b89b9463110286_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="wrap" title="点击运行" data-tt="00:00 | 00:00">             <div id="pan"></div>    </div></div>
<audio id="aud" src="https://pan.111t.net/view.php/1dac3dde61b89972a9d98a22e0ecf313.mp3" loop="loop" autoplay="autoplay"></audio>
<script>
let averAdd = 0, offset = 0, mKey = 0, mFlag = true;

let lrcTime = (ar) => {let tmpAr = [];for (j = 0; j < ar.length - 1; j++) {if (j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a, b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item, key) => {ar = item > aver ? aver : item;});return ar;};
let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for (x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re, '');if (geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g, '');let time = x.match(re);if (time != null) {for (y of time) {let tmp = y.match(/\d+/g);let sec = 0;for (z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar);}}}}lrcAr.sort((a, b) => a - b);return (lrcTime(lrcAr));}
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => { for (j = 0; j < lrcAr.length; j++) { if (aud.currentTime <= lrcAr) { mKey = j - 1; break; } } if (mKey < 0) mKey = 0; if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1; let time = lrcAr - (aud.currentTime - lrcAr); showLrc(time); };
let mState = () => aud.paused ? (pan.style.setProperty('--state', 'paused'), wrap.style.setProperty('--deg','-15deg')) : pan.style.setProperty('--state', 'running');
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
let toMin = (val) => {
   if (!val) return '00:00';
   val = Math.floor(val);
   let min = parseInt(val / 60),
            sec = parseFloat(val % 60);
   if (min < 10) min = '0' + min;
   if (sec < 10) sec = '0' + sec;
   return min + ':' + sec;
};
wrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
   let angle = -3 + (aud.currentTime * 28 / aud.duration || 0);
   wrap.style.setProperty('--deg', angle + 'deg');
   wrap.dataset.tt = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});</script>

红影发表于 2023-5-27 23:01

视频里的美女还会动的。漂亮的播放器。欣赏水芙蓉美女好帖{:4_187:}

醉美水芙蓉 发表于 2023-5-28 05:57

红影发表于 2023-5-27 23:01
视频里的美女还会动的。漂亮的播放器。欣赏水芙蓉美女好帖

红影美女早上好！

页: [1]

花潮论坛's Archiver

无缘缘的缘