论坛 › 欢乐水吧 › 美丽的世界 TO 东篱闲人

红影 发表于 2022-4-14 08:54

美丽的世界 TO 东篱闲人

<style>
        .mnBox {
                position: relative; display: flex; justify-content: center; align-items: center; width: 1200px; height: 675px; left: -304px;top:150px; perspective: 1100px;background: #eee url('https://pic.imgdb.cn/item/6257604d239250f7c52e5931.jpg') no-repeat center/cover; box-shadow: 4px 4px 5px #888;border-radius:12px;}
        .imgBox {
                --w: 180px; --h: 330px; position: absolute; width: var(--w); height: var(--h); cursor: pointer; transform-style: preserve-3d; animation: rotate 45s linear infinite; }
        .imgBox img { width: var(--w); height: var(--h); position: absolute; }
        @keyframes rotate { 100% { transform: rotateY(-360deg); } }
</style>

<div class="mnBox">
        <div class="imgBox"></div>
</div><br><br><br><br><br><br><br><br>

<script language="javascript">
let picAr = [
        "https://pic.imgdb.cn/item/6256e750239250f7c5c08109.gif",
        "https://pic.imgdb.cn/item/6256f2ad239250f7c5d36845.gif",
        "https://pic.imgdb.cn/item/62576a5e239250f7c536ed05.gif",
        "https://pic.imgdb.cn/item/6256f876239250f7c5dce9ac.gif",
        "https://pic.imgdb.cn/item/6256f986239250f7c5de7962.gif",
        "https://pic.imgdb.cn/item/62576b52239250f7c537e7ae.gif",
        "https://pic.imgdb.cn/item/625757be239250f7c5273717.gif",
        "https://pic.imgdb.cn/item/625758c9239250f7c527ea68.gif",
        "https://pic.imgdb.cn/item/62576c1f239250f7c538ae15.gif",
        "https://pic.imgdb.cn/item/62575b31239250f7c5299c1c.gif",
        "https://pic.imgdb.cn/item/62575cab239250f7c52af3d5.gif",
        "https://pic.imgdb.cn/item/62575d61239250f7c52bb0a9.gif",
        "https://pic.imgdb.cn/item/62576c89239250f7c5391171.gif",
        "https://pic.imgdb.cn/item/62575ebb239250f7c52d1e4d.gif"
];
let iBox = document.querySelector(".imgBox");
let hStr = "";
let angle = 360 / picAr.length;
let tz = Math.tan(Math.PI / 180 * (180 - angle) /2 ) * iBox.clientWidth / 2;
for(j=0; j<picAr.length; j++) {
        hStr += `<div style="transform: rotateY(${angle*j}deg) translateZ(${tz}px);"><img alt="" src="${picAr}"
/></div>\n`;
}
iBox.innerHTML = hStr;
let au = document.createElement("audio");
au.src = "https://music.163.com/song/media/outer/url?id=31245320.mp3";
au.autoplay = true;
au.loop = true;
document.querySelector(".mnBox").appendChild(au);
iBox.onmousemove = function(){ iBox.style.animationPlayState = "paused"; }
iBox.onmouseout = function(){ iBox.style.animationPlayState = "running"; }
iBox.onclick = function() {
        au.paused ? (au.play(), this.style.animationPlayState = "running") : (au.pause(), this.style.animationPlayState =
"paused");
}
</script>

红影 发表于 2022-4-14 08:56

感谢东篱大哥送我那么辉煌的一座建筑。把天上飞的地上跑的都送给东篱大哥，祝在这个美丽的世界尽情徜徉@东篱闲人 {:4_187:}

红影 发表于 2022-4-14 09:01

要让所有动物都朝一个方向跑朝一个方向飞，发觉是件很累人的事，要一点点让跑反的动物掉头。估计黑黑有本事用代码实现，我没那本事，只能手动降服那些动物。总算让它们都跑对了，全体奔着东篱大哥去了{:4_173:}

红影 发表于 2022-4-14 09:02

足不出户的日子，遥想那些能在阳光下自由奔跑的日子，是多么幸福的日子啊。

加林森 发表于 2022-4-14 12:31

红影制作得真漂亮，全部动物都跑起来了，还加了外边框，真美丽。好有创意。{:4_199:}

帮着喊：@东篱闲人 {:4_195:}

红芍药 发表于 2022-4-14 12:36

影子真有创意，漂酿。{:4_199:}{:4_199:}

红芍药 发表于 2022-4-14 12:37

这样玩真好，鼓掌。。{:4_199:}{:4_199:}

闲言不语 发表于 2022-4-14 13:09

这么多动物用代码表现，要多么烧脑呀。年轻真好！{:4_199:}

闲言不语 发表于 2022-4-14 13:10

红影 发表于 2022-4-14 09:02
足不出户的日子，遥想那些能在阳光下自由奔跑的日子，是多么幸福的日子啊。

影子还是笼中鸟呀？

东篱闲人 发表于 2022-4-14 16:05

红影 发表于 2022-4-14 08:56
感谢东篱大哥送我那么辉煌的一座建筑。把天上飞的地上跑的都送给东篱大哥，祝在这个美丽的世界尽情徜徉@东 ...

山中走兽云中雁，河里鱼虾雾里仙，这都送给俺啦？{:5_115:}

东篱闲人 发表于 2022-4-14 16:06

红影 发表于 2022-4-14 09:01
要让所有动物都朝一个方向跑朝一个方向飞，发觉是件很累人的事，要一点点让跑反的动物掉头。估计黑黑有本事 ...

嗯嗯，这得吃多少顿啊？{:5_117:}

东篱闲人 发表于 2022-4-14 16:06

加林森 发表于 2022-4-14 12:31
红影制作得真漂亮，全部动物都跑起来了，还加了外边框，真美丽。好有创意。

帮着喊：@东篱闲人 ...

加加快来一块吃。。。。。

加林森 发表于 2022-4-14 16:59

东篱闲人 发表于 2022-4-14 16:06
加加快来一块吃。。。。。

啊？？？？？你为什么要吃它们？{:4_203:}

东篱闲人 发表于 2022-4-14 17:03

加林森 发表于 2022-4-14 16:59
啊？？？？？你为什么要吃它们？

因为它们有肉！{:5_112:}

加林森 发表于 2022-4-14 17:06

东篱闲人 发表于 2022-4-14 17:03
因为它们有肉！

你吃得下？。。。。。{:4_203:}

东篱闲人 发表于 2022-4-14 17:10

加林森 发表于 2022-4-14 17:06
你吃得下？。。。。。

还行。。。。{:4_170:}

四海八荒 发表于 2022-4-14 17:16

东篱闲人 发表于 2022-4-14 16:05
山中走兽云中雁，河里鱼虾雾里仙，这都送给俺啦？

送给你看的，千万别给吃了哈

加林森 发表于 2022-4-14 17:18

东篱闲人 发表于 2022-4-14 17:10
还行。。。。

你啥子胃口啊。。。。。{:4_203:}

东篱闲人 发表于 2022-4-14 18:50

四海八荒 发表于 2022-4-14 17:16
送给你看的，千万别给吃了哈

荒荒知俺心。。。。{:5_117:}

东篱闲人 发表于 2022-4-14 18:50

加林森 发表于 2022-4-14 17:18
你啥子胃口啊。。。。。

铁齿铜牙。。。。{:5_117:}

查看完整版本: 美丽的世界 TO 东篱闲人