幸运草 发表于 2023-12-20 19:40

枕着溪流入眠——也来交作业

本帖最后由 幸运草 于 2023-12-20 19:40 编辑 <br /><br /><style>
#papa {
      margin: 0 00 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      background: lightblue;
      box-shadow: 3px 3px 20px #000;
      overflow: hidden;
      position: relative;
      display: grid;
      place-items: center;
      z-index: 1;
}
#mypic {
      position: absolute;
      top: 20px;
      width: 240px;
        border-radius: 50%;
        border: 5px solid lightblue;
      cursor: pointer;
      animation: rot 6s infinite linear var(--state);
}
#vid {
      position: absolute;
      width: 1024px;
      height: 700px;
      top: -60px;
      object-fit: cover;
      pointer-events: none;
}
li-zi {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
}
@keyframes moving {
      from { opacity: 0; transform: translate(0,0); }
      to { opacity: 1; transform: translate(var(--x0),var(--y0)); }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/51/5b4599d1ed71a.mp4" autoplay loop muted></video>
      <img id="mypic" src="https://pic.imgdb.cn/item/6582ad34c458853aefdbd660.png" alt="" />
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=717148" autoplay loop></audio>
</div>

<script>
let mState = () => aud.paused
      ? (papa.style.setProperty('--state','paused'),vid.pause())
      : (papa.style.setProperty('--state','running'),vid.play());
      
aud.addEventListener('pause', () => mState());

aud.addEventListener('playing', () => mState());

mypic.onclick = () => aud.paused ? aud.play() : aud.pause();

let all = 160;
for(let i = 0; i < all; i++) {
      let lz = document.createElement('li-zi');
      let hudu = Math.PI / 180 * 360 / all * i;
      let xx = 800 * Math.cos(hudu), yy = 800 * Math.sin(hudu);
      lz.style.cssText += `
                --x0: ${xx}px;
                --y0: ${yy}px;
                background: #${Math.random().toString(16).substr(-6)};
                animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
      `;
      papa.insertBefore(lz,mypic);
}
</script>

幸运草 发表于 2023-12-20 19:40

耶，成功辣{:6_234:}

幸运草 发表于 2023-12-20 19:41

我也学个作业，直接复制老师代码，换视频和音乐，偷懒啦{:6_242:}

幸运草 发表于 2023-12-20 19:41

谢谢马老师代码{:6_244:}

红影 发表于 2023-12-20 19:46

好看，音乐也好听，欣赏草儿好帖{:4_187:}

红影 发表于 2023-12-20 19:47

像被水流驱动的按钮呢，有趣{:4_173:}

世外桃源 发表于 2023-12-20 20:23

小草儿太厉害了，又一个作业完成{:4_199:}

世外桃源 发表于 2023-12-20 20:25

今天我很忙，现在还是有点事在，但小草儿完成了，桃园迟一点也是会练习做一个作业，但不一定成功

世外桃源 发表于 2023-12-20 20:26

你这个哪里学习的？

侃大山 发表于 2023-12-20 20:34

幸运草 发表于 2023-12-20 19:41
我也学个作业，直接复制老师代码，换视频和音乐，偷懒啦

聪明，这样不会碰到问题。

梦油 发表于 2023-12-20 20:38

欣赏佳作，问候草儿。

幸运草 发表于 2023-12-20 20:40

红影 发表于 2023-12-20 19:46
好看，音乐也好听，欣赏草儿好帖

谢谢{:6_244:}

幸运草 发表于 2023-12-20 20:41

红影 发表于 2023-12-20 19:47
像被水流驱动的按钮呢，有趣

我里面的都没调吖，就换了一下{:6_242:}

幸运草 发表于 2023-12-20 20:41

世外桃源 发表于 2023-12-20 20:23
小草儿太厉害了，又一个作业完成

谢谢桃源夸奖{:6_221:}

幸运草 发表于 2023-12-20 20:42

世外桃源 发表于 2023-12-20 20:25
今天我很忙，现在还是有点事在，但小草儿完成了，桃园迟一点也是会练习做一个作业，但不一定成功

先忙事，不急不急{:6_239:}

幸运草 发表于 2023-12-20 20:42

世外桃源 发表于 2023-12-20 20:26
你这个哪里学习的？

我去看看，那个《巡航》里的，那个特别好{:6_220:}

幸运草 发表于 2023-12-20 20:42

侃大山 发表于 2023-12-20 20:34
聪明，这样不会碰到问题。

谢谢{:6_231:}

幸运草 发表于 2023-12-20 20:43

梦油 发表于 2023-12-20 20:38
欣赏佳作，问候草儿。

问好梦油，谢谢{:6_244:}

红影 发表于 2023-12-20 20:46

幸运草 发表于 2023-12-20 20:40
谢谢

小草儿不客气啊{:4_187:}

红影 发表于 2023-12-20 20:46

幸运草 发表于 2023-12-20 20:41
我里面的都没调吖，就换了一下

天然美{:4_173:}
页: [1] 2
查看完整版本: 枕着溪流入眠——也来交作业