惬意时光（学习黑黑css-doodle代码）
<style>#papa {
margin: 80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: tan;
box-shadow: 0 0 10px gray;
position: relative;
}
.vid { position: absolute; width: 1024px; height: 640px;object-fit: cover; opacity: 1;}
.mypic { position: absolute;left: 432px;bottom: 80px;}
</style>
<div id="papa">
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c826ddb2fb1d42ebeda8af1c0fbfdd58_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<img class="mypic" src="https://pic2.imgdb.cn/item/645854280d2dde5777414b51.png" alt="" />
<css-doodle grid="1x3" id="mplayer">
:doodle {
@size: 1024px 640px;
pointer-events: none;
--state: paused;
}
@size: 200px;
@place: 260px 260px;
cursor: pointer;
pointer-events: auto;
@at(1,1) {
background: gray linear-gradient(#cc9900,#cccc00,#cc9900);
clip-path: @shape(
points: 300;
frame: 60;
scale: .65;
r: abs.cos(9t) ^ cos(9t);
);
animation: rot 6s infinite linear var(--state);
}
@keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
</div>
<audio id="aud" src="https://www.joy127.com/url/97261.mp3" autoplay loop></audio>
<script>
(function() {
let vid = document.querySelector('.vid');
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let mState = () => aud.paused ? (mplayer.style.setProperty('--state', 'paused'), vid.pause()) : (mplayer.style.setProperty('--state', 'running'), vid.play());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> 这个暂停能让动态都停下了{:4_173:}
终于可以看到了，本来播放器看不到了，瞎鼓捣又给鼓捣出来了。@马黑黑请检查作业。 红影 发表于 2023-5-8 20:32
这个暂停能让动态都停下了
终于可以看到了，本来播放器看不到了，瞎鼓捣又给鼓捣出来了。@马黑黑 ...
多尝试，总会上手。这不？弄得挺好 马黑黑 发表于 2023-5-8 20:50
多尝试，总会上手。这不？弄得挺好
其实上午就弄好，下午外出了，本来想外出前发出来，结果看不到播放器了，只能删了，晚上重新检查了一下{:4_173:} 醉美水芙蓉 发表于 2023-5-8 20:52
欣赏红影美女漂亮音画！
多谢水芙蓉的鼓励，您的鼓励就是学习动力呢{:4_187:} 问好红影！帖子漂亮！欣赏学习了！{:4_187:} 红影 发表于 2023-5-8 21:01
其实上午就弄好，下午外出了，本来想外出前发出来，结果看不到播放器了，只能删了，晚上重新检查了一下{: ...
玩这些东东需要时间 亦是金 发表于 2023-5-8 21:19
问好红影！帖子漂亮！欣赏学习了！
谢谢亦是金老师鼓励，我也是在学做呢，做得磕磕绊绊的{:4_173:} 马黑黑 发表于 2023-5-8 21:20
玩这些东东需要时间
嗯嗯，一边玩着，一边也是学习和复习的过车{:4_187:} 这样的空间感，真的让人很惬意{:4_187:} 转动的风扇，汹涌的海浪都 好逼真啊，窗外的播放器也是美美的。影儿做美图棒棒哒{:4_187:} 千羽 发表于 2023-5-8 21:33
这样的空间感，真的让人很惬意
是啊，落地玻璃对着大海，感觉眼前很开阔{:4_173:} 千羽 发表于 2023-5-8 21:36
转动的风扇，汹涌的海浪都 好逼真啊，窗外的播放器也是美美的。影儿做美图棒棒哒
没做图，这个是视频来的啊。忙着想发帖，也没加什么动态效果{:4_173:} 红影 发表于 2023-5-8 21:39
没做图，这个是视频来的啊。忙着想发帖，也没加什么动态效果
这样就挺好的，效果出来了{:4_181:} 红影 发表于 2023-5-8 21:38
是啊，落地玻璃对着大海，感觉眼前很开阔
这样的感觉挺好的{:4_173:} 太厉害了，心底里敬佩不已。忙忙慌慌奉茶先！{:4_204:}{:4_187:}{:4_178:}{:4_190:} 红影 发表于 2023-5-8 21:31
嗯嗯，一边玩着，一边也是学习和复习的过车
是的 千羽 发表于 2023-5-8 21:43
这样就挺好的，效果出来了
是的，这样的环境让人很舒服{:4_173:} 欣赏红影佳作！面朝大海的别墅美极了！{:4_187:}