绿叶清舟 发表于 2022-7-25 19:39

旋转木马

本帖最后由 绿叶清舟 于 2022-7-25 20:34 编辑 <br /><br /><style>
#papa { left: -214px; width: 1000px; height: 700px; display: grid; place-items: center; background: gray url('https://pic.imgdb.cn/item/62de7d07f54cd3f937a9056e.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; top: 310px; width: 238px; height: 310px; 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(300px); }
#mama img:nth-child(2) { transform: rotateY(60deg) translateZ(300px); }
#mama img:nth-child(3) { transform: rotateY(120deg) translateZ(300px); }
#mama img:nth-child(4) { transform: rotateY(180deg) translateZ(300px); }
#mama img:nth-child(5) { transform: rotateY(240deg) translateZ(300px); }
#mama img:nth-child(6) { transform: rotateY(300deg) translateZ(300px); }
#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/62de7f69f54cd3f937b51c86.gif" alt="" />
                <img class="pics" src="https://pic.imgdb.cn/item/62de7f97f54cd3f937b5fecb.gif" alt="" />
                <img class="pics" src="https://pic.imgdb.cn/item/62de7fb9f54cd3f937b6b163.gif" alt="" />
                <img class="pics" src="https://pic.imgdb.cn/item/62de7f69f54cd3f937b51c86.gif" alt="" />
                <img class="pics" src="https://pic.imgdb.cn/item/62de7f97f54cd3f937b5fecb.gif" alt="" />
                <img class="pics" src="https://pic.imgdb.cn/item/62de7fb9f54cd3f937b6b163.gif" alt="" />
      </div>
      <div id="msgbox">。</div>
      <div id="playbox"><input id="btnplay" type="button" value=">" /><span>旋转木马 - 吴思瑶</span></div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=26145046.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 20:00

这个是地道的

醉美水芙蓉 发表于 2022-7-25 20:01

绿叶清舟 发表于 2022-7-25 20:24

马黑黑 发表于 2022-7-25 20:00
这个是地道的

做图时拉了一下中间的距离高度是300的。图片就定了300的高度，可是上来的感觉还是小了一点点

绿叶清舟 发表于 2022-7-25 20:24

醉美水芙蓉 发表于 2022-7-25 20:01
欣赏清舟美女佳作！

谢谢芙蓉，晚上好

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

清舟这个制作真漂亮，真的在转呢。{:4_199:}

绿叶清舟 发表于 2022-7-25 20:55

加林森 发表于 2022-7-25 20:38
清舟这个制作真漂亮，真的在转呢。

谢谢队长，上传了才发现图片没抠太干净了

马黑黑 发表于 2022-7-25 20:55

绿叶清舟 发表于 2022-7-25 20:24
做图时拉了一下中间的距离高度是300的。图片就定了300的高度，可是上来的感觉还是小了一点点

嗯，可以了的，也许也可以调大一点点

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

绿叶清舟 发表于 2022-7-25 20:55
谢谢队长，上传了才发现图片没抠太干净了

没关系的。

绿叶清舟 发表于 2022-7-25 21:05

马黑黑 发表于 2022-7-25 20:55
嗯，可以了的，也许也可以调大一点点

找到原因了，本身图片没顶格裁剪了

绿叶清舟 发表于 2022-7-25 21:12

加林森 发表于 2022-7-25 21:05
没关系的。

假装看不到{:4_189:}

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

绿叶清舟 发表于 2022-7-25 21:12
假装看不到

没看见。{:4_170:}

红影 发表于 2022-7-25 21:26

清舟这个制作真漂亮，真的是旋转木马了呢。清舟做帖很会动脑筋{:4_199:}

马黑黑 发表于 2022-7-25 21:32

绿叶清舟 发表于 2022-7-25 21:05
找到原因了，本身图片没顶格裁剪了

嗯，要处理一下

小辣椒 发表于 2022-7-25 21:55

清舟这个效果特别好{:4_187:}

青青子衿 发表于 2022-7-25 23:36

清舟宝贝，友友好多才多艺。。。这个旋转木马，友友坐前面，我坐后面。。。。想起我们儿时的七彩光阴。。。。问好友友。看到友友回复，劝咱晚上注意休息，友友善良热情，俺记下了。

绿叶清舟 发表于 2022-7-26 10:22

加林森 发表于 2022-7-25 21:20
没看见。

我也没看见{:4_189:}

绿叶清舟 发表于 2022-7-26 10:23

青青子衿 发表于 2022-7-25 23:36
清舟宝贝，友友好多才多艺。。。这个旋转木马，友友坐前面，我坐后面。。。。想起我们儿时的七彩光阴。。。 ...

青青上午好，不用客气啊，来了花潮就是家人了嘛

绿叶清舟 发表于 2022-7-26 10:23

小辣椒 发表于 2022-7-25 21:55
清舟这个效果特别好

这么巧还真搜到了这首歌了

绿叶清舟 发表于 2022-7-26 10:24

红影 发表于 2022-7-25 21:26
清舟这个制作真漂亮，真的是旋转木马了呢。清舟做帖很会动脑筋

这个效果比整个灯的来的容易嘛{:4_189:}
页: [1] 2
查看完整版本: 旋转木马