论坛 › 欢乐水吧 › 舞起来--帖赠阳光&冰心 学习黑黑【遗失】效果

小辣椒 发表于 2022-7-30 21:07

舞起来--帖赠阳光&冰心 学习黑黑【遗失】效果

<style>
#papa { left: -340px; width: 1280px; height: 653px; top: 150px; background: teal url('https://wj1.zp68.com:812/lxx/yunhua/2022/05/12/7da.gif') no-repeat center / cover; perspective: 2000px; box-shadow: 4px 4px 24px #000; position: relative; }
#wrapper { position: relative; width: 200px; height: 200px; left: 37%; top: 50%; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(-20deg); cursor: pointer; }
#mypic { position: absolute; width: 80px; height: 142px; transform: translateZ(50px) translateY(50px) translateX(50px); }
#wrapper>span:nth-child(1) { transform: translateZ(100px); background: teal; }
#wrapper>span:nth-child(2) { transform: translateZ(-100px); background: lightgreen; }
#wrapper>span:nth-child(3) { transform: translateX(-100px) rotateY(90deg); background: skyblue; }
#wrapper>span:nth-child(4) { transform: translateX(100px) rotateY(90deg); background: green; }
#wrapper>span:nth-child(5) { transform: translateY(-100px) rotateX(90deg); background: RoyalBlue; }
#wrapper>span:nth-child(6) { transform: translateY(100px) rotateX(90deg); background: tan; }
.panel { position: absolute; width: 200px; height: 200px; text-align: center; opacity: .95;}
</style>

<div id="papa">
        <div id="wrapper">
                <span class="panel"></span>
                <span class="panel"></span>
                <span class="panel"></span>
                <span class="panel"></span>
                <span class="panel"></span>
                <span class="panel"></span>
                <img id="mypic" src="https://wj1.zp68.com:812/lxx/yunhua/2022/05/12/39.gif " alt="" />
        </div>
</div>

<script>
let aud = new Audio();
aud.loop = true;
aud.src = 'https://music.163.com/song/media/outer/url?id=1477578256.mp3';
let panel = document.querySelector('.panel');
wrapper.onclick = () => panel.style.display == 'none' ? (panel.style.display = 'block', aud.pause()) : (panel.style.display = 'none',aud.play());
</script>
<br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-7-30 21:08

@马黑黑

黑黑谢谢分享教程代码

梦油 发表于 2022-7-30 21:10

小辣椒朋友晚上好！画面动感十足，显得非常活跃，又生气。

小辣椒 发表于 2022-7-30 21:10

@三月的阳光

阳光好久没有一起玩了 知道阳光现在没有时间玩了，做了冒号肯定忙的，没有时间上来没关系，旧图重新用，顺便回忆一下曾经开心的玩。。。。。

顺祝冰心开心快乐每一天

红影 发表于 2022-7-30 21:12

这么多舞者，连盒子里也有呢。如此欢快的帖子。阳光和冰心收礼开心{:4_187:}

红影 发表于 2022-7-30 21:13

亲爱的制作又华丽又欢快，真棒{:4_187:}

小辣椒 发表于 2022-7-30 21:13

梦油 发表于 2022-7-30 21:10
小辣椒朋友晚上好！画面动感十足，显得非常活跃，又生气。

梦油晚上好，谢谢欣赏{:4_187:}

小辣椒 发表于 2022-7-30 21:15

红影 发表于 2022-7-30 21:12
这么多舞者，连盒子里也有呢。如此欢快的帖子。阳光和冰心收礼开心

哈哈~~~亲爱的，旧图，一方面新用，再就是阳光暂时不能玩了，我们回忆一下曾经开心玩的场景

加林森 发表于 2022-7-30 21:16

好漂亮的制作，音乐节奏很欢快。美女这么多啊。厉害厉害。阳光收礼开森！@三月的阳光 {:4_195:}

小辣椒 发表于 2022-7-30 21:21

加林森 发表于 2022-7-30 21:16
好漂亮的制作，音乐节奏很欢快。美女这么多啊。厉害厉害。阳光收礼开森！@三月的阳光

队长晚上好，这个黑黑的教程直接套用，比较简单，就立马做一个，前面的没有时间做了，要补活动的帖

加林森 发表于 2022-7-30 21:51

小辣椒 发表于 2022-7-30 21:21
队长晚上好，这个黑黑的教程直接套用，比较简单，就立马做一个，前面的没有时间做了，要补活动的帖

嗯嗯。明白的。不要太辛苦啦！

东篱闲人 发表于 2022-7-30 21:57

美女装盒子，师傅真会玩。。。{:5_116:}

马黑黑 发表于 2022-7-30 21:57

舞娘漂亮

三月的阳光 发表于 2022-7-30 22:03

谢谢师傅，很漂亮{:4_171:}{:4_171:}

三月的阳光 发表于 2022-7-30 22:04

同祝师傅开心快乐每一天{:4_187:}

红影 发表于 2022-7-30 22:58

小辣椒 发表于 2022-7-30 21:15
哈哈~~~亲爱的，旧图，一方面新用，再就是阳光暂时不能玩了，我们回忆一下曾经开心玩的场景

哦，他忙了么？一起等他忙好{:4_204:}

加林森 发表于 2022-7-30 23:12

三月的阳光 发表于 2022-7-30 22:04
同祝师傅开心快乐每一天

兄弟晚上吧。好久不见了，真想你啦！

梦油 发表于 2022-7-31 08:51

小辣椒 发表于 2022-7-30 21:13
梦油晚上好，谢谢欣赏

我很喜欢欣赏你的作品。

马黑黑 发表于 2022-7-31 09:10

{:4_178:}

冰心 发表于 2022-7-31 16:30

谢谢美女师傅，手机也能欣赏，赞哈

查看完整版本: 舞起来--帖赠阳光&冰心 学习黑黑【遗失】效果