加林森 发表于 2022-7-25 14:38

《窗外的雨，屋内的你》- Xwdit


<style>
#papa { left: -214px; width: 1024px; height: 680px; display: grid; place-items: center; background: gray url('https://pic.imgdb.cn/item/62de33ddf54cd3f937388c4d.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/62de3586f54cd3f937416437.gif" alt="" />
                <img class="pics" src="https://pic.imgdb.cn/item/62de366ff54cd3f937465f6f.jpg" alt="" />
                <img class="pics" src="https://pic.imgdb.cn/item/62de36fcf54cd3f93749501d.jpg" alt="" />
                <img class="pics" src="https://pic.imgdb.cn/item/62de3793f54cd3f9374c7aa9.jpg" alt="" />
                <img class="pics" src="https://pic.imgdb.cn/item/62de3825f54cd3f9374f7890.jpg" alt="" />
                <img class="pics" src="https://pic.imgdb.cn/item/62de38cdf54cd3f93752e794.jpg" alt="" />
      </div>
      <div id="msgbox">刚刚好现在外边狂风暴雨 在房间里戴着耳机听歌。</div>
      <div id="playbox"><input id="btnplay" type="button" value=">" /><span>窗外的雨，屋内的你 - Xwdit</span></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1398014749.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 14:38

@马黑黑

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

队长又是一个好看的制作，真棒{:4_204:}

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

制作惟妙惟肖。

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

红影 发表于 2022-7-25 15:05
队长又是一个好看的制作，真棒

不做手痒。{:4_189:}

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

梦油 发表于 2022-7-25 15:08
制作惟妙惟肖。

现在是不是感觉凉快多了。

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

加林森 发表于 2022-7-25 15:08
不做手痒。

这个效果总觉得特别好{:4_204:}

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

红影 发表于 2022-7-25 15:24
这个效果总觉得特别好

是的。简单明了。

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

加林森 发表于 2022-7-25 15:18
现在是不是感觉凉快多了。

是的，凉快多了。

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

梦油 发表于 2022-7-25 15:45
是的，凉快多了。

嗯嗯。就是要这个效果。

樵歌 发表于 2022-7-25 16:35

新式走灯！漂亮{:4_173:}

梦油 发表于 2022-7-25 16:42

加林森 发表于 2022-7-25 15:48
嗯嗯。就是要这个效果。

目的达到了。

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

梦油 发表于 2022-7-25 16:42
目的达到了。

那就好。

加林森 发表于 2022-7-25 17:08

樵歌 发表于 2022-7-25 16:35
新式走灯！漂亮

必须的。{:4_189:}

绿叶清舟 发表于 2022-7-25 17:46

队长这个制作漂亮 啊

加林森 发表于 2022-7-25 18:01

绿叶清舟 发表于 2022-7-25 17:46
队长这个制作漂亮 啊

清舟下午好！我也去制作了一个跟随小鸟的帖子。只是改成放鹰了。{:4_189:}

马黑黑 发表于 2022-7-25 18:51

队长找个理由不出门{:4_170:}

红影 发表于 2022-7-25 19:07

加林森 发表于 2022-7-25 15:26
是的。简单明了。

转动的图图很好看。

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

马黑黑 发表于 2022-7-25 18:51
队长找个理由不出门

知我者老黑也。。。。{:4_170:}

加林森 发表于 2022-7-25 19:20

红影 发表于 2022-7-25 19:07
转动的图图很好看。

是的。
页: [1] 2 3
查看完整版本: 《窗外的雨，屋内的你》- Xwdit