绿叶清舟 发表于 2024-8-2 21:50

最近比较烦


<style>
/* 帖子父容器id选择器 */
#papa {
        position: relative;
        margin: 230px 0 30px calc(50% - 730px);
        width: 1280px;
        height: 780px;
        background: url('https://p.upyun.com/demo/tmp/65xVSZeW.webp') no-repeat center/cover;
}

/* 子元素小图片class选择器 */
.mypic {
        position: absolute; /* 绝对定位 */
        width: 160px;
        height: 160px;
mix-blend-mode: multiply;
animation: rot 8s linear infinite;
}
.mypic:nth-of-type(1) {
        left: 10px;
        top: 10px;
}
.mypic:nth-of-type(2) {
        right: 10px;
        bottom: 10px;
}
.mypic:nth-of-type(3) {
        left: calc(50% - 80px);
        top: calc(50% - 80px);
}
.mypic:nth-of-type(4) {
        right: 10px;
        top: 10px;
}
.mypic:nth-of-type(5) {
        left: 10px;
        bottom: 10px;
}
@keyframes rot {
        from { transform: rotate(0deg); } /* 从 0 度开始旋转 */
        to { transform: rotate(360deg); } /* 到 360 度即一圈完成一个旋转周期 */
}
</style>

<div id="papa">
        <img class="mypic" alt="" src="https://p.upyun.com/demo/tmp/Ninsh4Fu.webp" />
        <img class="mypic" alt="" src="https://p.upyun.com/demo/tmp/Ninsh4Fu.webp" />
        <img class="mypic" alt="" src="https://p.upyun.com/demo/tmp/Ninsh4Fu.webp" />
      <img class="mypic" alt="" src="https://p.upyun.com/demo/tmp/Ninsh4Fu.webp" />
        <img class="mypic" alt="" src="https://p.upyun.com/demo/tmp/Ninsh4Fu.webp" />

      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=108206" autoplay loop></audio>
      
</div>

<script>
      aud.oncanplay = aud.onplaying = aud.onpause = () => {
                aud.paused ? vid.pause() : vid.play();
                mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
                mydiv.title = ['暂停','播放'][+aud.paused];
      }
      mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2024-8-2 22:02

这黑白底的图图真的非常有趣，小播也很漂亮。
欣赏清舟好帖{:4_187:}

红影 发表于 2024-8-2 22:03

这么多小播，哪个都无法点击暂停啊{:4_173:}

绿叶清舟 发表于 2024-8-2 22:05

红影 发表于 2024-8-2 22:03
这么多小播，哪个都无法点击暂停啊

这个是那个小白贴子里的作业了，没去加关联{:4_189:}

小辣椒 发表于 2024-8-2 22:05

天太热了，小猫咪都感觉烦躁了，{:4_170:}

小辣椒 发表于 2024-8-2 22:05

5个球球是播放器吗？

红影 发表于 2024-8-2 22:33

绿叶清舟 发表于 2024-8-2 22:05
这个是那个小白贴子里的作业了，没去加关联

这么美的制作，索性自己加个关联啊。是不是加个cursor: pointer;就可以？

梦油 发表于 2024-8-3 09:36

炎炎夏日，闷热的天气让人难以平静，烦躁的情绪让人难以忍受，三伏天快点过去吧。

梦江南 发表于 2024-8-3 09:50

台风来吧，天太热了！

梦江南 发表于 2024-8-3 09:50

欣赏老师好制作！{:4_187:}
页: [1]
查看完整版本: 最近比较烦