加林森 发表于 2022-7-25 10:47

《风摇盛夏》- 逆时针向（学习老黑的‘狞猫’制作）


<style>
#papa { left: -214px; width: 1024px; height: 680px; display: grid; place-items: center; background: gray url('https://pic.imgdb.cn/item/62ddfc49f54cd3f93712d17a.jpg'); box-shadow: 3px 3px 20px #000; perspective: 3000px; font: bold 1.2em / 30px sans-serif;text-shadow: 1px 1px 1px black; color: snow; position: relative; }
#msgbox {position: absolute; bottom: 25px; }
#mama { position: absolute; width: 460px; height: 460px; animation: rot 20s linear infinite; transform-style: preserve-3d; }
#mama:hover { animation-play-state: paused; cursor: pointer; }
.pics { position: absolute; width: 100%; height: 100%; transition: all .5s; }
.pics:hover { box-shadow: 14px 14px 20px #000; top: 10px; filter: grayscale(100%); }
#mama img:nth-child(1) { transform: rotateY(0deg) translateZ(400px); }
#mama img:nth-child(2) { transform: rotateY(60deg) translateZ(400px); }
#mama img:nth-child(3) { transform: rotateY(120deg) translateZ(400px); }
#mama img:nth-child(4) { transform: rotateY(180deg) translateZ(400px); }
#mama img:nth-child(5) { transform: rotateY(240deg) translateZ(400px); }
#mama img:nth-child(6) { transform: rotateY(300deg) translateZ(400px); }
#playbox { position: absolute; left: 10px; top: 10px; padding: 10px; display: flex; gap: 8px; z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; outline: none; border: none; }
#btnplay:hover { background: #aaa; color: #ff0000; cursor: pointer; }
@keyframes rot { to { transform: rotateY(360deg); } }
</style>

<div id="papa">
      <div id="mama">
                <img class="pics" src="https://pic.imgdb.cn/item/62ddff23f54cd3f9371f779c.jpg" alt="" />
                <img class="pics" src="https://pic.imgdb.cn/item/62ddffbef54cd3f937223826.jpg" alt="" />
                <img class="pics" src="https://pic.imgdb.cn/item/62de008df54cd3f93725f077.jpg" alt="" />
                <img class="pics" src="https://pic.imgdb.cn/item/62de0194f54cd3f9372ab8ca.jpg" alt="" />
                <img class="pics" src="https://pic.imgdb.cn/item/62de023df54cd3f9372dae4c.jpg" alt="" />
                <img class="pics" src="https://pic.imgdb.cn/item/62de02d8f54cd3f9373076ed.jpg" alt="" />
      </div>
      <div id="msgbox">明明是夏天却感觉到了清凉感呢。</div>
      <div id="playbox"><input id="btnplay" type="button" value=">" /><span>风摇盛夏 - 逆时针向</span></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1843577172.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
</script>

加林森 发表于 2022-7-25 10:47

@马黑黑

加林森 发表于 2022-7-25 11:07

@樵歌

醉美水芙蓉 发表于 2022-7-25 11:41

加林森 发表于 2022-7-25 11:56

醉美水芙蓉 发表于 2022-7-25 11:41
队长做得漂亮！

谢谢芙蓉！中午好！{:4_190:}

马黑黑 发表于 2022-7-25 12:04

欣赏队长的精美制作

加林森 发表于 2022-7-25 12:06

马黑黑 发表于 2022-7-25 12:04
欣赏队长的精美制作

谢谢你的共享！{:4_190:}

马黑黑 发表于 2022-7-25 12:07

加林森 发表于 2022-7-25 12:06
谢谢你的共享！

你是说代码吧

加林森 发表于 2022-7-25 12:09

马黑黑 发表于 2022-7-25 12:07
你是说代码吧

是啊。

马黑黑 发表于 2022-7-25 12:10

加林森 发表于 2022-7-25 12:09
是啊。

封装类的代码是工具，随便使用，看用的水平

加林森 发表于 2022-7-25 12:12

马黑黑 发表于 2022-7-25 12:10
封装类的代码是工具，随便使用，看用的水平

是的。我刚好听见这首音乐，就用来解暑了。

浣溪沙 发表于 2022-7-25 12:16

好好漂亮啊，赞{:4_178:}

加林森 发表于 2022-7-25 12:28

浣溪沙 发表于 2022-7-25 12:16
好好漂亮啊，赞

谢谢沙沙支持！{:4_190:}

马黑黑 发表于 2022-7-25 12:35

加林森 发表于 2022-7-25 12:12
是的。我刚好听见这首音乐，就用来解暑了。

挺好挺好{:5_106:}

红影 发表于 2022-7-25 13:20

绿色对眼睛是保护。欣赏队长漂亮的制作{:4_204:}

加林森 发表于 2022-7-25 13:52

马黑黑 发表于 2022-7-25 12:35
挺好挺好

{:4_180:}

加林森 发表于 2022-7-25 13:54

红影 发表于 2022-7-25 13:20
绿色对眼睛是保护。欣赏队长漂亮的制作

是的。谢谢！

红影 发表于 2022-7-25 15:01

加林森 发表于 2022-7-25 13:54
是的。谢谢！

问好队长，新周快乐{:4_187:}

梦油 发表于 2022-7-25 15:03

队长为花潮带来了凉爽。

加林森 发表于 2022-7-25 15:05

红影 发表于 2022-7-25 15:01
问好队长，新周快乐

明天就要出发了。你东西准备好没？
页: [1] 2
查看完整版本: 《风摇盛夏》- 逆时针向（学习老黑的‘狞猫’制作）