流水光阴 发表于 2024-2-3 11:43

钢琴曲欣赏 （学习帖-2）

<style>
#papa { margin: 150px 0 0 calc(50% - 881px); width: 1600px; height: 950px; background: url('https://pic.imgdb.cn/item/65b88e9b871b83018afd396c.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
.mypic { position: absolute; cursor: pointer; animation: rot var(--du) infinite linear var(--state); }
.mypic:nth-of-type(1) { left: 40px; top: 100px; width: 100px; mix-blend-mode: overlay; --du: 6s; }
.mypic:nth-of-type(2) { right: 620px; top: 220px; filter: opacity(.8) blur(.5px); --du: 10s; }
.mypic:nth-of-type(3) { width: 120px; right: 30px; top: 30px; filter: opacity(.9) brightness(1.2); --du: 4s; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1978555093" autoplay loop></audio>
      <img class="mypic" src="https://pic.imgdb.cn/item/65bdb5cc871b83018a2c9f8f.png" alt="" />
      <img class="mypic" src="https://pic.imgdb.cn/item/65bdb5cc871b83018a2c9f8f.png" alt="" />
      <img class="mypic" src="https://pic.imgdb.cn/item/65bdb5cc871b83018a2c9f8f.png" alt="" />
</div>

<script>
var btns = document.querySelectorAll('.mypic');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
btns.forEach(btn => btn.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>
<br><br><br><br><br>

小辣椒 发表于 2024-2-3 11:56

这个是什么效果，小辣椒先站位欣赏{:4_187:}

小辣椒 发表于 2024-2-3 11:57

欢迎流水光阴一起学习一起玩{:4_171:}

红影 发表于 2024-2-3 13:14

好漂亮的制作。这个好像和前面一帖的背景一样呢，使用的播放器效果不同了。欣赏流水光源好帖{:4_199:}

梦油 发表于 2024-2-3 17:26

音律和谐、悠扬婉转，真是美的艺术享受。

流水光阴 发表于 2024-2-17 16:38

小辣椒 发表于 2024-2-3 11:56
这个是什么效果，小辣椒先站位欣赏

小辣椒下午好{:4_171:}

流水光阴 发表于 2024-2-17 16:38

小辣椒 发表于 2024-2-3 11:57
欢迎流水光阴一起学习一起玩

我笨 学习感觉好难，跟你们后面学习了

流水光阴 发表于 2024-2-17 16:39

红影 发表于 2024-2-3 13:14
好漂亮的制作。这个好像和前面一帖的背景一样呢，使用的播放器效果不同了。欣赏流水光源好帖

谢谢红影大美女领导欣赏

流水光阴 发表于 2024-2-17 16:39

梦油 发表于 2024-2-3 17:26
音律和谐、悠扬婉转，真是美的艺术享受。

谢谢梦油朋友欣赏{:4_187:}

梦油 发表于 2024-2-18 14:49

流水光阴 发表于 2024-2-17 16:39
谢谢梦油朋友欣赏

流水朋友别客气。

小辣椒 发表于 2024-2-18 20:20

流水光阴 发表于 2024-2-17 16:38
小辣椒下午好

流水光阴晚上好{:4_171:}

小辣椒 发表于 2024-2-18 20:20

流水光阴 发表于 2024-2-17 16:38
我笨 学习感觉好难，跟你们后面学习了

那会笨，小辣椒一样的，我们一起学习{:4_179:}

红影 发表于 2024-2-18 21:00

流水光阴 发表于 2024-2-17 16:39
谢谢红影大美女领导欣赏

太客气了，流水光阴兰心蕙质，真是好巧的手{:4_187:}

东篱闲人 发表于 2024-4-2 13:06

古朴素雅，十分漂亮。{:4_204:}

东篱闲人 发表于 2024-4-2 13:07

不过这两个转动的大花，实在有点影响整体意境。。{:5_117:}
页: [1]
查看完整版本: 钢琴曲欣赏 （学习帖-2）