腾格尔 - 天堂
本帖最后由 岩新新 于 2023-6-26 14:37 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1916159">
<style>#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: tan url('https://pan.111t.net/view.php/62d03e76ba7eaeccaa80214cef2ca6ed.gif')no-repeat center / cover; ;
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
--state: paused;
}
#vid1 {
position: absolute;
width: 600px;
height: 130%;
border-radius: 2%;
opacity: .96;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
}
#vid2 {
position: absolute;
width: 1400px;
height: 100%;
border-radius: 2%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
}
.mybox {
position: absolute;
width: 350px;
height: 350px;
right: 30px;
top: -30px;
z-index: 5;
background:url('') no-repeat center/cover;
transform: rotate( -180deg);
clip-path: polygon(50.00% 71.21%, 50.01% 71.44%, 50.09% 72.14%, 50.31% 73.27%, 50.72% 74.78%, 51.39% 76.60%, 52.35% 78.64%, 53.63% 80.81%, 55.26% 83.01%, 57.24% 85.13%, 59.56% 87.09%, 62.19% 88.77%, 65.10% 90.12%, 68.23% 91.05%, 71.53% 91.52%, 74.92% 91.49%, 78.33% 90.96%, 81.67% 89.92%, 84.86% 88.40%, 87.82% 86.43%, 90.48% 84.06%, 92.76% 81.35%, 94.60% 78.35%, 95.95% 75.12%, 96.78% 71.74%, 97.06% 68.26%, 96.78% 64.74%, 95.95% 61.21%, 94.60% 57.71%, 92.76% 54.28%, 90.48% 50.91%, 87.82% 47.64%, 84.86% 44.45%, 81.67% 41.34%, 78.33% 38.31%, 74.92% 35.36%, 71.53% 32.46%, 68.23% 29.64%, 65.10% 26.87%, 62.19% 24.18%, 59.56% 21.58%, 57.24% 19.09%, 55.26% 16.74%, 53.63% 14.54%, 52.35% 12.55%, 51.39% 10.79%, 50.72% 9.29%, 50.31% 8.09%, 50.09% 7.21%, 50.01% 6.68%, 50.00% 6.50%, 49.99% 6.68%, 49.91% 7.21%, 49.69% 8.09%, 49.28% 9.29%, 48.61% 10.79%, 47.65% 12.55%, 46.37% 14.54%, 44.74% 16.74%, 42.76% 19.09%, 40.44% 21.58%, 37.81% 24.18%, 34.90% 26.87%, 31.77% 29.64%, 28.47% 32.46%, 25.08% 35.36%, 21.67% 38.31%, 18.33% 41.34%, 15.14% 44.45%, 12.18% 47.64%, 9.52% 50.91%, 7.24% 54.28%, 5.40% 57.71%, 4.05% 61.21%, 3.22% 64.74%, 2.94% 68.26%, 3.22% 71.74%, 4.05% 75.12%, 5.40% 78.35%, 7.24% 81.35%, 9.52% 84.06%, 12.18% 86.43%, 15.14% 88.40%, 18.33% 89.92%, 21.67% 90.96%, 25.08% 91.49%, 28.47% 91.52%, 31.77% 91.05%, 34.90% 90.12%, 37.81% 88.77%, 40.44% 87.09%, 42.76% 85.13%, 44.74% 83.01%, 46.37% 80.81%, 47.65% 78.64%, 48.61% 76.60%, 49.28% 74.78%, 49.69% 73.27%, 49.91% 72.14%, 49.99% 71.44%, 50.00% 71.21%);
}
#lrc {--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6));position: absolute;left: 50%;bottom: 20px;transform: translate(-50%);font: bold 2em sans-serif;color: hsl(0, 10%, 90%);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: CornflowerBlue;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards var(--state);}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
css-doodle { position: absolute; }</style><div id="papa"><css-doodle id="mplayer">
:doodle { @size: 160px; left: 50px; top: 5px;animation: rot 6s infinite linear var(--state); cursor: pointer; }
background: rgba(255,100,0,.7);
clip-path: @shape(
points: 300;
scale: .25;
x: 2 * cos(t) + cos(8t);
y: 2 * sin(t) - sin(8t);
);
</css-doodle><div class="mybox"><video id="vid1" src="https://img.tukuppt.com/video_show/2418175/00/01/41/5b42b85fa5edc.mp4" autoplay="" loop="
" muted=""></video></div><div id="lrc" data-lrc="HUACHAO">HUACHAO</div><video id="vid2" src="http://data.mvbox.cn/music/sp/16/10/19/16101915485928132344.mp4" autoplay="" loop="" muted=""></video></div><audio id="aud" src="http://music.163.com/song/media/outer/url?id=151200" autoplay="autoplay" loop="loop"></audio><script>(function() {
let mKey = 0, mFlag = true, slip = 0;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.body.appendChild(script);
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), vid1.pause(), vid2.pause()) : (papa.style.setProperty('--state','running'),vid1.play(), vid2.play());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('seeked', () => calcKey());
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, 'n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.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);};
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
})();</script></td></tr></table>
歌曲好听，制作漂亮。欣赏新新好帖{:4_204:}
问好老师，欣赏精彩分享，点赞！{:4_187:}
页:
[1]