论坛 › 欢乐水吧 › 猫猫看云南

东篱闲人 发表于 2022-4-16 18:46

猫猫看云南

<style>
      .mnBox { position: relative; display: flex; justify-content: center; align-items: center; width: 1024px; height: 700px; left: -150px;TOP:30px; perspective: 1000px; }
      .imgBox { --w: 190px; --h: 560px; position: absolute; width: var(--w); height: var(--h); cursor: pointer; transform-style: preserve-3d; }
      .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>

<script language="javascript">
let picAr = [
   
      "https://s1.ax1x.com/2022/04/16/LYGh3n.jpg",
      "https://s1.ax1x.com/2022/04/16/LYJG2n.png",
         "https://s1.ax1x.com/2022/04/16/LYGvg1.jpg",
      "https://s1.ax1x.com/2022/04/16/LYJG2n.png",
      "https://s1.ax1x.com/2022/04/16/LYJF4H.jpg",
         "https://s1.ax1x.com/2022/04/16/LYJG2n.png",
          "https://s1.ax1x.com/2022/04/16/LYJmKP.jpg",
      "https://s1.ax1x.com/2022/04/16/LYJG2n.png",
      
      
];
      
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`;
      hStr += `<div><img alt="" src="${picAr}" /></div>\n`;
}
iBox.innerHTML = hStr;
let au = document.createElement("audio");
au.src = "http://music.163.com/song/media/outer/url?id=1348243006.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");
}

setTimeout(function() {
      let children = iBox.children;
      for(j=0; j<picAr.length; j++) {
                children.style.transform = `rotateY(${angle*j}deg) translateZ(${tz}px)`;
      }
      iBox.style.animation = "rotate 30s linear infinite";
},10000);

</script>

加林森 发表于 2022-4-16 19:00

帮着喊：@大猫咪{:4_195:}

红芍药 发表于 2022-4-16 19:29

云南好风光，猫收礼哦。{:4_187:}

马黑黑 发表于 2022-4-16 19:33

猫步优雅{:4_170:}

大猫咪 发表于 2022-4-16 19:44

老头这制作真漂亮 ，谢谢美帖，真棒！ {:4_189:}都是云南打卡地，这2天版纳正在过泼水节，

老热闹了{:5_117:} 歌也特别好听，

{:4_204:}{:4_179:}{:4_190:}

大猫咪 发表于 2022-4-16 19:45

加林森 发表于 2022-4-16 19:00
帮着喊：@大猫咪

来了来队长 {:4_187:}晚上好   {:4_204:} 小跑来收礼物啦。 {:4_191:}

大猫咪 发表于 2022-4-16 19:46

红芍药 发表于 2022-4-16 19:29
云南好风光，猫收礼哦。

谢谢芍药， 一起欣赏老头美帖   晚上好！{:4_187:}{:4_190:}

大猫咪 发表于 2022-4-16 19:47

马黑黑 发表于 2022-4-16 19:33
猫步优雅

猫跳跳芭蕾上来收礼物了，{:4_170:}谢谢老黑，晚上好{:4_179:}{:4_191:}

红芍药 发表于 2022-4-16 19:49

大猫咪 发表于 2022-4-16 19:46
谢谢芍药， 一起欣赏老头美帖   晚上好！

老头做得真好。猫咪开心。。{:4_187:}

大猫咪 发表于 2022-4-16 19:51

红芍药 发表于 2022-4-16 19:49
老头做得真好。猫咪开心。。

嗯嗯   谢谢芍药，一起开心{:4_187:}

东篱闲人 发表于 2022-4-16 20:15

大猫咪 发表于 2022-4-16 19:44
老头这制作真漂亮 ，谢谢美帖，真棒！ 都是云南打卡地，这2天版纳正在过泼水节，

老热闹了{: ...

云南是个好地方啊，山美水美人更美！{:5_116:}

大猫咪 发表于 2022-4-16 20:17

东篱闲人 发表于 2022-4-16 20:15
云南是个好地方啊，山美水美人更美！

嗯是不错的   猫也喜欢等老头来喝酒看美景{:4_187:}

东篱闲人 发表于 2022-4-16 20:30

大猫咪 发表于 2022-4-16 20:17
嗯是不错的   猫也喜欢等老头来喝酒看美景

必须滴，喝茶。。。。{:5_112:}

大猫咪 发表于 2022-4-16 20:32

东篱闲人 发表于 2022-4-16 20:30
必须滴，喝茶。。。。

嗯嗯   老头来喝啥都开心{:4_179:}

东篱闲人 发表于 2022-4-16 20:34

大猫咪 发表于 2022-4-16 20:32
嗯嗯   老头来喝啥都开心

嗯嗯嗯。。。。{:5_112:}

加林森 发表于 2022-4-16 20:41

大猫咪 发表于 2022-4-16 19:45
来了来队长   晚上好    小跑来收礼物啦。

来了就好，收礼物开心。{:4_204:}{:4_191:}

大猫咪 发表于 2022-4-16 20:42

加林森 发表于 2022-4-16 20:41
来了就好，收礼物开心。

{:4_179:}{:4_190:}

加林森 发表于 2022-4-16 20:45

大猫咪 发表于 2022-4-16 20:42


{:4_190:}{:4_179:}

来看你 发表于 2022-4-16 22:41

好看哒，跟着猫猫后面看

红影 发表于 2022-4-17 08:04

做透明图，这个思路真好，这样背面的图图也能看得到了呢。东篱大哥的思路总是如此与众不同{:4_199:}

查看完整版本: 猫猫看云南