测试月儿播放器乌龟赛跑

醉美水芙蓉 发表于 2023-7-2 20:19

本帖最后由醉美水芙蓉于 2023-7-2 20:53 编辑 <br /><br /><style>#mydiv {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 600px;
background: url('') no-repeat center/cover;
box-shadow: 0 0 6px #000;
overflow: hidden;
position: relative;
z-index: 1;
--state: paused;
}
#mydiv::before {
   position: absolute;
   content: '\1F40B;';
   left: 81%;
   bottom: 2%;
   transform: rotate(10deg);
   font: bold 80px/80px sans-serif;
   cursor: pointer;
   opacity: .9;
   z-index: 10;
   pointer-events: auto;
   animation: rot 1s infinite alternate linear var(--state);

}
@keyframes rot { to { transform: rotate(30deg); } }
   #wutai {
position: absolute;
width: 100%;
top:300px;
height: 247px;
z-index: 6;
overflow: hidden;
position: relative;
}
.wugui {
margin: 30px 0;
position: absolute;
right:0px;
width: 178px;
height: 187px;
background: url('https://pic.imgdb.cn/item/64a164a51ddac507cc1c256a.png') no-repeat;
animation: crawl 2s steps(6) var(--delay) infinite, move 16s var(--delay) infinite linearvar(--state);
--delay: -8.5s;
}
.wugui:nth-of-type(2) {
transform: scale(.5);
--delay: -5.4s;
}
.wugui:nth-of-type(3) {
transform: scale(.8);
--delay: -0.1s;
}

li-zi {
display: block;
position: absolute;
right: 20px;
bottom: 60px;
width: 20px;
height: 20px;
background: snow;
border-radius: 50%;
z-index: 11;
animation: move1 10s var(--delay) infinite alternate var(--state);
--deg: -5deg; --xx: -600px; --delay: 0;
}
@keyframes move1 {
from { transform: rotate(0deg) translateY(0px); opacity: 1; }
to { transform: rotate(var(--deg)) translateY(var(--xx)); opacity: 0; }
}
@keyframes crawl {
0% { background-position:0px 0px; }
100% { background-position:0px -1122px; }
}
@keyframes move {
to { Right: 720px; }
}
@keyframes rot { to { transform: rotate(30deg); } }

#vid {
position: absolute;
width: 1300px;
height: 100%;
top:0px;
left:-100px;
border-radius: 2%;
opacity: .95;
object-fit: cover;
pointer-events: none;
}
#lrc {--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6));position: absolute;left: 50%;top: 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));z-index: 12;}
#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%; } }

</style>

<div id="mydiv">
<div id="wutai">
<div class="wugui"></div>
<div class="wugui"></div>
<div class="wugui"></div>
</div>
<div id="lrc" data-lrc="HUACHAO">HUACHAO</div><video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/35/5b571cee335c9.mp4" autoplay="" loop="" muted=""></video>

<div class="tortoise"></div></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=2045337513" autoplay="autoplay" loop="loop"></audio><script>(function (){
let mKey = 0, mFlag = true, slip = 0;
   let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];
let total = 120;
let createLizi = (mum,sons) => {
Array.from({length: sons}).forEach( (s,k) => {
let xx = 6 + Math.ceil(Math.random() * 10);
s = document.createElement('li-zi');
s.style.cssText += `
width: ${xx}px;
height: ${xx}px;
left: calc(84% - ${xx / 2}px);
--deg: ${30 - Math.ceil(Math.random() * 245)}deg;
--xx: -${600 + Math.ceil(Math.random() * 1200)}px;
--delay: -${Math.random() * 60}s;
`;
mum.appendChild(s);
});
};
createLizi(mydiv,total);
let mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'), vid.pause()) : (mydiv.style.setProperty('--state','running'), vid.play());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.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');mydiv.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>

红影发表于 2023-7-2 21:03

这个把泡泡也加上了，很赞。而且点播放器暂停，所有的都能暂停呢。欣赏水芙蓉好帖{:4_199:}

红影发表于 2023-7-2 21:04

这个好像点父元素都能暂停的，虽然手型符号只有播放器上有{:4_173:}

千羽发表于 2023-7-2 21:12

芙蓉好快啊：在水底爬行的小乌龟看起来更轻松自如，鱼儿也在欢快的吐着泡泡，芙蓉棒棒哒{:4_187:}

醉美水芙蓉 发表于 2023-7-2 22:00

红影发表于 2023-7-2 21:04
这个好像点父元素都能暂停的，虽然手型符号只有播放器上有

谢谢红影美女点评！

醉美水芙蓉 发表于 2023-7-2 22:01

千羽发表于 2023-7-2 21:12
芙蓉好快啊：在水底爬行的小乌龟看起来更轻松自如，鱼儿也在欢快的吐着泡泡，芙蓉棒棒哒

谢谢千羽美女支持！

红影发表于 2023-7-2 22:06

醉美水芙蓉发表于 2023-7-2 22:00
谢谢红影美女点评！

问好芙蓉美女，这个运用得很好呢{:4_187:}

南无月 发表于 2023-7-3 09:55

着实漂亮，还改了小乌龟移动的方向，厉害{:4_187:}

醉美水芙蓉 发表于 2023-7-3 12:00

南无月发表于 2023-7-3 09:55
着实漂亮，还改了小乌龟移动的方向，厉害

是你的播放器！

页: [1]

花潮论坛's Archiver

测试月儿播放器乌龟赛跑