幸运草 发表于 2024-7-12 22:42

《我都懂》——完成作业

本帖最后由 幸运草 于 2024-7-15 22:11 编辑 <br /><br /><style>
#mydiv {
      --width: 1280px;
      margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
      width: var(--width);
      height: 700px;
      background: radial-gradient(circle, transparent, silver, LightSteelBlue, DimGray);
      box-shadow: 3px 3px 6px #333;
      pointer-events: none;
      overflow: hidden;
      position: relative;
}
#mydiv::before, #mydiv::after {
      position: absolute;
      content: '';
}
#mydiv::before {
      inset: 0;
      background: rgba(2400, 237, 204, .15);
}
#mydiv::after {
      width: 100px;
      height: 100px;
      top: 40px;
      left: calc(50% - 50px);
      background: url('https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png') no-repeat center/cover;
      filter: drop-shadow(0 0 26px lightblue);
      pointer-events: auto;
      cursor: pointer;
      animation: rot 8s linear infinite var(--state);
}
#vid {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: calc(100% + 75px);
      object-fit: cover;
      mix-blend-mode: color-burn;
      opacity: .75;
}
@keyframes rot {
      to { transform: rotate(360deg); }
}
</style>

<div id="mydiv" title="播放/暂停">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1856030278" muted autoplay loop></audio>
      <video id="vid" src="https://link.hhtjim.com/163/14312415.mp4"loop autoplay disablePictureInPicture></video>
</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-7-12 22:44

套用一个老师最新滴代码，好像应该改一下颜色{:6_219:}

幸运草 发表于 2024-7-12 22:46

介个样也不错，视频本来就怪异{:6_245:}

幸运草 发表于 2024-7-12 22:48

轻声说『我都懂』，陪伴每一个失落的灵魂......
介个系歌曲本意

幸运草 发表于 2024-7-12 23:01

不调辣，还系灌水方便{:6_231:}

幸运草 发表于 2024-7-12 23:02

【我都懂】收录在#周意纹 2021年EP《她的房间》 2021年8月全面发行

朵拉 发表于 2024-7-12 23:40

新颖的制作，欣赏学习哈{:4_204:}

红影 发表于 2024-7-13 09:23

这个好，还自动带歌词了。空了我也去找个来试试{:4_173:}

红影 发表于 2024-7-13 09:26

那当中红色的那圈也是因为颜色的调整么？哦，在亮处偏黄了，应该是视频的颜色叠加。
结合歌曲意境，貌似这一圈设置成偏灰比较好。{:4_204:}

红影 发表于 2024-7-13 09:26

欣赏幸运草好帖{:4_187:}

梦油 发表于 2024-7-13 10:48

欣赏佳作，问候幸运草。

幸运草 发表于 2024-7-15 22:06

朵拉 发表于 2024-7-12 23:40
新颖的制作，欣赏学习哈

谢谢鼓励{:6_221:}

幸运草 发表于 2024-7-15 22:07

红影 发表于 2024-7-13 09:23
这个好，还自动带歌词了。空了我也去找个来试试

好吖，一起玩{:6_220:}

幸运草 发表于 2024-7-15 22:07

红影 发表于 2024-7-13 09:26
那当中红色的那圈也是因为颜色的调整么？哦，在亮处偏黄了，应该是视频的颜色叠加。
结合歌曲意境，貌似这 ...

我去试试看看

幸运草 发表于 2024-7-15 22:15

红影 发表于 2024-7-13 09:26
那当中红色的那圈也是因为颜色的调整么？哦，在亮处偏黄了，应该是视频的颜色叠加。
结合歌曲意境，貌似这 ...

改好辣{:6_234:}

幸运草 发表于 2024-7-15 22:15

梦油 发表于 2024-7-13 10:48
欣赏佳作，问候幸运草。

谢谢你滴鼓励{:6_221:}

红影 发表于 2024-7-15 22:39

幸运草 发表于 2024-7-15 22:07
好吖，一起玩

我已经做了，你都不去看{:4_173:}

红影 发表于 2024-7-15 22:40

幸运草 发表于 2024-7-15 22:15
改好辣

看到了，这个更好看了{:4_187:}

梦油 发表于 2024-7-16 14:29

幸运草 发表于 2024-7-15 22:15
谢谢你滴鼓励

幸运草朋友别客气。
页: [1]
查看完整版本: 《我都懂》——完成作业