狞猫 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

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

狞猫

本帖最后由马黑黑于 2022-7-25 07:40 编辑 <br /><br /><style>
#papa { left: -214px; width: 1024px; height: 680px; display: grid; place-items: center; background: gray url('https://638183.freep.cn/638183/Pic/2022/nm.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://638183.freep.cn/638183/Pic/2022/nm1.jpg" alt="" />
<img class="pics" src="https://638183.freep.cn/638183/Pic/2022/nm2.jpg" alt="" />
<img class="pics" src="https://638183.freep.cn/638183/Pic/2022/nm3.jpg" alt="" />
<img class="pics" src="https://638183.freep.cn/638183/Pic/2022/nm4.jpg" alt="" />
<img class="pics" src="https://638183.freep.cn/638183/Pic/2022/nm5.jpg" alt="" />
<img class="pics" src="https://638183.freep.cn/638183/Pic/2022/nm6.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=1885581139.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 08:03

极简的3d图片木马轮转：

<style>
#papa { left: -214px; width: 1024px; height: 680px; display: grid; place-items: center; background: gray url('https://638183.freep.cn/638183/Pic/2022/nm.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://638183.freep.cn/638183/Pic/2022/nm1.jpg" alt="" />
<img class="pics" src="https://638183.freep.cn/638183/Pic/2022/nm2.jpg" alt="" />
<img class="pics" src="https://638183.freep.cn/638183/Pic/2022/nm3.jpg" alt="" />
<img class="pics" src="https://638183.freep.cn/638183/Pic/2022/nm4.jpg" alt="" />
<img class="pics" src="https://638183.freep.cn/638183/Pic/2022/nm5.jpg" alt="" />
<img class="pics" src="https://638183.freep.cn/638183/Pic/2022/nm6.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=1885581139.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 08:05

非洲狞猫相对特殊

浣溪沙 发表于 2022-7-25 08:05

哈哈哈，听这声，看这图，就知道猫和虎是本家{:4_172:}

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

昨天的知识今天发出来了。等会来学习制作。

红影发表于 2022-7-25 09:43

有一张带斑点的也是么？不是说它们的外套普通么{:4_173:}

红影发表于 2022-7-25 09:47

又见走马灯，以前黑黑也做过。非常喜欢的效果。
狞猫以及猞猁，貌似都比家猫的耳朵长出一截，而且耳尖卷曲。鼠标点过不但让转动停止，而且会图片变黑白了。真好的制作。给黑黑点赞{:4_187:}

樵歌发表于 2022-7-25 09:56

有点吓人{:4_193:}

梦油发表于 2022-7-25 10:18

开阔眼界、增长见识。我看有的像猎豹，有的像饿狼，还有的像大老虎，当然更多地还是像猫。但说了半天它们什么都不是，就是“狞猫”。谢谢黑黑朋友，俺长见识了。

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

梦油发表于 2022-7-25 10:18
开阔眼界、增长见识。我看有的像猎豹，有的像饿狼，还有的像大老虎，当然更多地还是像猫。但说了半天它们什 ...

以前陪小孩看动物世界，多少懂一些{:5_106:}

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

红影发表于 2022-7-25 09:43
有一张带斑点的也是么？不是说它们的外套普通么

非洲狞猫有点特殊

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

浣溪沙发表于 2022-7-25 08:05
哈哈哈，听这声，看这图，就知道猫和虎是本家

嗯，虎是猫科动物

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

樵歌发表于 2022-7-25 09:56
有点吓人

它们又不吃你

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

加林森发表于 2022-7-25 08:55
昨天的知识今天发出来了。等会来学习制作。

挺好挺好

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

红影发表于 2022-7-25 09:47
又见走马灯，以前黑黑也做过。非常喜欢的效果。
狞猫以及猞猁，貌似都比家猫的耳朵长出一截，而且耳尖卷曲 ...

猞猁和狞猫都比家猫大很多很多。猞猁和狞猫耳朵自带WiFi天线。狞猫皮毛一般，没有进入皮草市场，故而它们的生存状况要轻松的多

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

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

活学活用体会才更加深刻。

梦油发表于 2022-7-25 14:35

马黑黑发表于 2022-7-25 12:09
以前陪小孩看动物世界，多少懂一些

我也看过《动物世界》但没留心。

红影发表于 2022-7-25 14:58

马黑黑发表于 2022-7-25 12:47
非洲狞猫有点特殊

哦，属于另类狞猫啊{:4_173:}

红影发表于 2022-7-25 14:58

马黑黑发表于 2022-7-25 12:50
猞猁和狞猫都比家猫大很多很多。猞猁和狞猫耳朵自带WiFi天线。狞猫皮毛一般，没有进入皮草市场，故而它们 ...

“耳朵自带WiFi天线”，看到这句笑喷{:4_189:}

朵拉发表于 2022-7-25 15:56

新教程，好好学习{:4_178:}

页: [1] 2 3

花潮论坛's Archiver

狞猫