梦江南 发表于 2024-8-12 15:23

学习帖【睡吧宝贝】

<style>
#mydiv {
      margin: 30px 0 30px calc(50% - 593px);
      width: 1024px;
      height: 576px;
      background: tan;
      box-shadow: 3px 3px 8px gray;
      overflow: hidden;
      position: relative;
}
#mydiv::before {
      position:absolute;
      content: '';
      inset: 0;
      background: url('http://tuku.link/imgs/2024/08/7a9828f640a321fc.png') no-repeat center/cover;
      -webkit-mask: radial-gradient(circle at center, transparent 0.2px, red 1px) repeat center/var(--size) var(--size);
      transition: .72s;
      --size: 3px;
}
#mydiv:hover::before { --size: 32px; transform: scale(115%) rotate(2deg); }
#player {
      --inset: gray;
      position: absolute;
      left: calc(50% - 60px);
      top: 40px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: url('https://638183.freep.cn/638183/small/rose.jpg') no-repeat center/cover;
      mix-blend-mode:overlay ;
      box-shadow: inset 0 0 30px var(--inset);
      cursor: pointer;
      animation: rot 8s linear infinite var(--state);
}
#player:hover { --inset: plum; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2110361365" autoplay loop></audio>
      <div id="player" title="播放/暂停"></div>
</div>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

梦油 发表于 2024-8-12 16:32

这小宝贝儿真可爱。

起个网名好难 发表于 2024-8-12 16:54

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

起个网名好难 发表于 2024-8-12 17:00

mix-blend-mode:overlay; 和模仿的原帖中 mix-blend-mode: multiply; 不同， 感觉模仿的原帖效果好些， 甚至不要这句更好些。

梦江南 发表于 2024-8-12 17:03

梦油 发表于 2024-8-12 16:32
这小宝贝儿真可爱。

是啊，宝贝可爱日日鲜。谢谢梦油老师支持！{:4_204:}

梦江南 发表于 2024-8-12 17:03

起个网名好难 发表于 2024-8-12 16:54


谢谢老师支持，问好！{:4_204:}

茉莉 发表于 2024-8-12 18:01

好可爱呢

朵拉 发表于 2024-8-12 19:26

好可爱的宝宝{:4_204:}

红影 发表于 2024-8-12 20:48

这个背景选得好，特别适合这个代码。
欣赏梦江南好帖{:4_199:}

红影 发表于 2024-8-12 20:48

江南的作业完成得好快啊，厉害{:4_199:}

小辣椒 发表于 2024-8-12 22:41

去看了黑黑老师的分享，发现梦江南套用代码制作还是不错的{:4_199:}

小辣椒 发表于 2024-8-12 22:41

继续加油‘！’

梦江南 发表于 2024-8-13 08:06

起个网名好难 发表于 2024-8-12 17:00
mix-blend-mode:overlay; 和模仿的原帖中 mix-blend-mode: multiply; 不同， 感觉模仿的原帖效果好些， 甚 ...

回老师，我的这张图片背景较暗，用黑黑老师的遮罩代码，就像红楼梦里的遮罩一样圆转变成黑影了。假如去掉这遮罩代码，圆转就变白了，感觉有点显眼，所以就用叠加遮罩代码。

梦江南 发表于 2024-8-13 08:09

茉莉 发表于 2024-8-12 18:01
好可爱呢

谢谢茉莉老师分享支持，问好！{:4_204:}

梦江南 发表于 2024-8-13 08:10

朵拉 发表于 2024-8-12 19:26
好可爱的宝宝

谢谢朵拉老师分享支持，问好！{:4_204:}

梦江南 发表于 2024-8-13 08:13

红影 发表于 2024-8-12 20:48
这个背景选得好，特别适合这个代码。
欣赏梦江南好帖

谢谢影子支持鼓励，问好！{:4_204:}

梦江南 发表于 2024-8-13 08:21

红影 发表于 2024-8-12 20:48
江南的作业完成得好快啊，厉害

我完成的作业，只是套用，没有新意。{:4_201:}

梦江南 发表于 2024-8-13 08:25

小辣椒 发表于 2024-8-12 22:41
去看了黑黑老师的分享，发现梦江南套用代码制作还是不错的

谢谢您支持鼓励。还请多指导。{:4_204:}

梦江南 发表于 2024-8-13 08:26

小辣椒 发表于 2024-8-12 22:41
继续加油‘！’

谢谢，我会继续努力的。{:4_204:}

梦油 发表于 2024-8-13 10:44

梦江南 发表于 2024-8-12 17:03
是啊，宝贝可爱日日鲜。谢谢梦油老师支持！

不客气。
页: [1] 2
查看完整版本: 学习帖【睡吧宝贝】