论坛 › 欢乐水吧 › 梦里寒花隔玉箫

东篱闲人 发表于 2022-5-9 10:16

梦里寒花隔玉箫

<style>
.outer { left:-400px; width: 1400px; height: 712px; background: linear-gradient(45deg,gray,orange), url('https://s1.ax1x.com/2022/05/08/O3y8VU.jpg') no-repeat center/cover; background-blend-mode: overlay, normal; filter: drop-shadow(0 0 10px gray); opacity: .95; position: relative; }
.outer h2 { margin: 0; position: absolute; left: 80%; top: 10px; font: bold 1.5em sans-serif; color: teal; text-shadow: 2px 2px 1px #222; }
.spic { position: absolute; width: 400px; height: 400px; top: 100px; mix-blend-mode: multiply; }
.r-small { position: absolute; width: 45px; height: 45px; border-radius: 50%; top: calc(97% - 97px); left: calc(47.4% - 47.4px); cursor: pointer; text-align: center; animation: rot 6s linear infinite; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div class="outer">
      <h2>纳兰诗意</h2>
      <img class="spic" src="https://s1.ax1x.com/2022/05/08/O3RWHx.gif" alt="" />
      <div class="outer r-small"></div>
</div>

<script>
let flag = true;
let ele = document.querySelector('.r-small');
let au = document.createElement('audio');
au.src = 'http://music.163.com/song/media/outer/url?id=1869870110.mp3';
au.loop = true;
au.autoplay = flag;
au.style.display = 'none';
ele.appendChild(au);
if(!flag) ele.style.animationPlayState = 'paused';
ele.onclick = function() { flag ? (au.pause(), this.style.animationPlayState = 'paused', flag = false) : (au.play(), this.style.animationPlayState = 'running', flag = true); }
</script>

浅风儿 发表于 2022-5-9 11:09

竟然坐个沙发来着~

浅风儿 发表于 2022-5-9 11:11

手机上才看到全貌~

加林森 发表于 2022-5-9 11:45

老兄制作得真漂亮，为你点赞！{:4_199:}

红影 发表于 2022-5-9 13:37

东篱大哥把那个转动图做在了原图的圆环里，构思很巧妙{:4_199:}

红影 发表于 2022-5-9 13:37

画面好美，那个帅哥也好帅啊{:4_173:}

小辣椒 发表于 2022-5-9 14:03

老头就是聪明，这个按钮设计位置放的非常好，就是我音乐没有听到，是不是手机原因？刚才队长的音乐我听到的

梦油 发表于 2022-5-9 16:38

东篱朋友下午好！图美意境美曲子也美。你真棒！

马黑黑 发表于 2022-5-9 20:09

好美的诗情画意

闲言不语 发表于 2022-5-9 20:45

纳兰的诗被包装的更美了{:4_199:}

东篱闲人 发表于 2022-5-10 10:43

浅风儿 发表于 2022-5-9 11:09
竟然坐个沙发来着~

那你看看，不是外人嘛。。。{:5_117:}

东篱闲人 发表于 2022-5-10 10:44

加林森 发表于 2022-5-9 11:45
老兄制作得真漂亮，为你点赞！

这个代码很好玩。。。{:5_112:}

东篱闲人 发表于 2022-5-10 10:45

红影 发表于 2022-5-9 13:37
画面好美，那个帅哥也好帅啊

你喜欢？哪天给你介绍介绍，你俩挺般配。。。{:4_189:}

东篱闲人 发表于 2022-5-10 10:45

小辣椒 发表于 2022-5-9 14:03
老头就是聪明，这个按钮设计位置放的非常好，就是我音乐没有听到，是不是手机原因？刚才队长的音乐我听到的

看到师傅格外亲。。。{:4_179:}

东篱闲人 发表于 2022-5-10 10:46

梦油 发表于 2022-5-9 16:38
东篱朋友下午好！图美意境美曲子也美。你真棒！

谢谢梦老。。。{:4_190:}

东篱闲人 发表于 2022-5-10 10:46

马黑黑 发表于 2022-5-9 20:09
好美的诗情画意

主要是你的代码好。。。{:5_116:}

加林森 发表于 2022-5-10 10:47

东篱闲人 发表于 2022-5-10 10:44
这个代码很好玩。。。

是的，挺好玩的。可以变色的。

东篱闲人 发表于 2022-5-10 10:47

闲言不语 发表于 2022-5-9 20:45
纳兰的诗被包装的更美了

瞎包的，也不知道纳兰同意不同意。。。{:5_117:}

马黑黑 发表于 2022-5-10 12:15

东篱闲人 发表于 2022-5-10 10:46
主要是你的代码好。。。

创意是个人的事情，代码只是工具性质的东东

梦油 发表于 2022-5-10 13:32

东篱闲人 发表于 2022-5-10 10:46
谢谢梦老。。。

东篱朋友下午好！咱们都是上了年纪的人，彼此就不客气啦。

查看完整版本: 梦里寒花隔玉箫