<style>
#papa {
margin: 80px 0 0 calc(50% - 681px);
width: 1200px;
height: 700px;
background: tan;
box-shadow: 0 0 10px gray;
position: relative;
--state: paused;
}
css-doodle { position: absolute; }
.vid { position: absolute; width: 1200px; height: 700px;object-fit: cover; opacity: 1; }
</style>
<div id="papa">
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/15ffded0ce14cc4ed9cff128e93adcf7_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<css-doodle grid="5" id="mplayer">
:doodle {
@size: 1200px 700px;
z-index: 1;
}
@match(@i ≤ @size - 1) {
@size: @r(40,110)px;
position: absolute;
@shape: @p(fish, whale);
@place:50px 50px;
background: SlateBlue;
offset-path: path('M@r(200) @r(200,400), L@r(500,700) @r(300), L@r(1000,1160) @r(200,400), L@r(400,550) @r(300,460)Z');
:after {
position:absolute;
content: '';
right: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background: radial-gradient(black,snow);
}
animation: swim @r(10,30)s @r(-10, 0)s infinite ease-in-out var(--state);
}
@nth(@size) {
@size: 120px;
@place: center 78%;
background: rgba(0,255,0,.75);
cursor: pointer;
clip-path: @shape(
points: 300;
scale: .7;
r: cos.cos.cos.cos.cos(7t) ^ cos(7t);
);
animation: rot 5s infinite linear var(--state);
}
@keyframes swim { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<css-doodle id="lrc">
:doodle {
@size: auto 4em;
left: 10px;
bottom: 10px;
--geci: "css-doodle player"; --motion: cover2; --tt: 1s;
}
/* 单元格两个伪元素显示lrc歌词 */
display: grid;
place-items: center start;
:before, :after {
content: var(--geci);
color: gray; /* 歌词底色 */
font: bold 2em sans-serif;
text-shadow: 1px 1px 2px #000;
white-space: pre;
}
:after {
position: absolute;
width: 0;
color: darkgreen; /* 同步歌词颜色 */
overflow: hidden;
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%; } }
</css-doodle>
<audio id="aud" src="https://www.qqmc.com/mp3/music277192354.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
这个讨论帖好{:4_199:}跟着学习中 南无月 发表于 2023-5-24 22:49
这个讨论帖好跟着学习中
没有加新注释 马黑黑 发表于 2023-5-24 22:50
没有加新注释
有标准答案对就很好了，我知足的 南无月 发表于 2023-5-24 22:54
有标准答案对就很好了，我知足的
本来想加简单注释的，想想之前的代码都有的，就没加了 醉美水芙蓉 发表于 2023-5-25 06:17
谢谢黑黑老师指导！
你试试调整后的代码，看看效果，在尝试理解为什么这么组织代码 黑黑辛苦了，查找别人代码中的问题，也是非常不容易的事呢{:4_187:} 水芙蓉找到的视频挺漂亮，歌词同步怎么到背景外面了啊{:4_173:} 很不错，感谢分享！{:4_187:} 醉美水芙蓉 发表于 2023-5-25 11:44
好的！我研究一下，错在哪里？
主要：
① css-doodle 没有做 position 定位。本帖使用两个 css-doodle 标签，它和其他的HTML标签一样，需要定位。我整理的代码在CSS里完成了这项工作，然后，第一个 css-doodle 与 #papa 同尺寸，有了 position: absolute 绝对定位，它就会和 papa 重叠在一起，第二个css-doodle 则需要在自己的标签内做定位（left/right 和 top/bottom配套）。
② 拼凑JS代码，需要将不要的去掉。你这帖不需要进度条和播放时间信息，你去掉了大部分，但有少量多余的没有去掉。这个需要功夫，最好需要懂得每一句的作用，下手起来才会得心应手。
③ CSS变量 --state 有个层级问题，你这帖子由 papa 包裹内容，则应将 --state 变量交给它，css-doodle 里的变量赋值要删掉。 醉美水芙蓉 发表于 2023-5-25 11:43
我上次跟你说的播放器做不出来，就是这个原因！
嗯嗯，代码里加入的内容不同。 马黑黑 发表于 2023-5-24 23:02
本来想加简单注释的，想想之前的代码都有的，就没加了
我得等晚上细看，昨天后来用手机看得吃办 南无月 发表于 2023-5-25 17:49
我得等晚上细看，昨天后来用手机看得吃办
{:4_203:} 马黑黑 发表于 2023-5-25 17:51
我的错，吃力。 南无月 发表于 2023-5-25 17:58
我的错，吃力。
{:4_172:}
页:
[1]