任麦 - 一生之幸一世之命
本帖最后由 醉美水芙蓉 于 2023-4-27 20:45 编辑 <br /><br /> <style>#papa {
margin: 100px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/342d27b2cf7c4ba7631bc87482272365.mp4.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
--state: paused;
}
#mplayer {
width: 80px;
height: 160px;
left: 10px;
bottom: 10px;
background: Teal;
border-radius: 8px;
box-shadow: 0px 0px 12px snow;
transition: .6s;
position: absolute;
pointer-events: none;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
}
#mplayer::before {
width: 30px;
height: 30px;
left: calc(50% - 15px);
bottom: 15px;
border-radius: 50%;
background: LightSeaGreen;
pointer-events: auto;
cursor: pointer;
border: 2px solid snow;
box-shadow: 0 0 10px Red;
animation: flash .6s infinite alternate var(--state);
}
#mplayer::after {
content:attr(data-tt);
top: 6px; right: 6px; bottom: 60px; left: 6px;
background:LightSeaGreen;
color: purple;
font-size: 14px;
text-align: center;
padding: 4px;
white-space:pre;
}
#mplayer:active { transform: rotate(5deg); }
#vid { display: none; }
#canv {
position: absolute;
display: block;
opacity: .2;
}
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 380px; top: 540px; font: bold 2.4em sans-serif; color: hsl(0, 10%, 90%); -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: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(60, 90%, 50%, .45), hsla(50, 90%, 50%, .6), hsla(0, 100%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes flash {
to { box-shadow: 0 0 30px white; }
}
.txt3d {
position: absolute; left: 40px;top: 10px;
width: 380px;
height: 60px;
line-height: 60px;
color: white;
font-family: '微软雅黑', '黑体', sans-serif;
font-size: 2.2rem;
color:LightSeaGreen;
text-align: center;
letter-spacing: 4px;
text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8);
</style>
<div id="papa">
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="mplayer"></div>
<div id="btnFs">全屏观赏</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music250984048.mp3" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/83/5b4b08181b572_10s_big.mp4" autoplay loop muted></video>
</div>
<script>
(function() {
let total = 18, fs = false, timerId, boxTimer;
for(i = 0; i < total; i++) {
let span = document.createElement('span');
span.className = 'ball';
span.style.cssText += `
transform: rotate(${60/total*i}deg) translate(320px);
animation: flash ${Math.random()+0.6}s infinite alternate var(--state);
`;
mplayer.appendChild(span);
}
let flash = () => {
clearTimeout(boxTimer);
papa.style.setProperty('--boxsd', `
${Math.random()*100 - 250}px 0 60px #${Math.random().toString(16).substr(-6)},
${Math.random()*100 - 150}px 0 60px #${Math.random().toString(16).substr(-6)}`);
boxTimer = setTimeout(flash,620);
};
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), clearTimeout(boxTimer),lrc.style.setProperty('--state','paused')) : (papa.style.setProperty('--state','running'), flash(),lrc.style.setProperty('--state','running'));
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('ended', () => playNext());
papa.addEventListener('mousemove', (e) => {
clearTimeout(timerId);
btnFs.style.display = 'block';
timerId = setTimeout('btnFs.style.display = "none"', 3000);
});
btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
let mKey = 0, mFlag = true;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
})();
</script> 欣赏！{:4_187:} 水芙蓉在补作业吧，这个遥控器你以前做过没有？ 我都很多没有去看的 欣赏 水芙蓉的精彩制作{:4_187:} 小辣椒 发表于 2023-4-27 21:55
欣赏 水芙蓉的精彩制作
小辣椒晚上好！好多都不会做呢？ 醉美水芙蓉 发表于 2023-4-27 22:27
小辣椒晚上好！好多都不会做呢？
怎么不会做，套用代码不会做吗？ 小辣椒 发表于 2023-4-27 22:31
怎么不会做，套用代码不会做吗？
要向你们学习，不能简单的套用！ 很好听的歌{:4_187:} 小九 发表于 2023-4-29 20:44
很好听的歌
小九美女晚上好！ 醉美水芙蓉 发表于 2023-4-29 20:58
小九美女晚上好！
芙蓉晚上好！ 五一快乐！{:4_187:}
页:
[1]