东篱闲人 发表于 2022-4-15 08:27

梅兰竹菊 TO舟舟师傅

本帖最后由 东篱闲人 于 2022-4-15 09:06 编辑 <br /><br /><style>
      .mnBox { position: relative; display: flex; justify-content: center; align-items: center; width: 1024px; height: 600px; left: -150px; perspective: 1000px; }
      .imgBox { --w: 200px; --h: 500px; 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://i.niupic.com/images/2022/04/14/9Z4i.gif",
      "https://s1.ax1x.com/2022/04/15/L3whSs.png",
         "https://i.niupic.com/images/2022/04/14/9Z4k.gif",
      "https://s1.ax1x.com/2022/04/15/L3whSs.png",
      "https://i.niupic.com/images/2022/04/14/9Z4m.gif",
         "https://s1.ax1x.com/2022/04/15/L3whSs.png",
          "https://i.niupic.com/images/2022/04/14/9Z4o.gif",
      "https://s1.ax1x.com/2022/04/15/L3whSs.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=29753557.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 15s linear infinite";
},10000);

</script>

樵歌 发表于 2022-4-15 10:17

挖，这个灯笼屏全是透明的山水，太美啦。{:4_178:}

樵歌 发表于 2022-4-15 10:18

帮喊你小师傅@绿叶清舟 {:4_195:}

樵歌 发表于 2022-4-15 10:18

错了，是花鸟全虫画儿{:4_173:}

东篱闲人 发表于 2022-4-15 12:38

樵歌 发表于 2022-4-15 10:17
挖，这个灯笼屏全是透明的山水，太美啦。

通透。。。。{:5_112:}

东篱闲人 发表于 2022-4-15 12:38

樵歌 发表于 2022-4-15 10:18
错了，是花鸟全虫画儿

哪有虫？{:5_115:}

红影 发表于 2022-4-15 13:59

我只看到了一半的图图，带山水的4张没看到呢{:5_102:}

加林森 发表于 2022-4-15 17:30

老兄又制作了一个出来玩啊，挺漂亮的！{:4_199:} 清舟收礼开心！{:4_204:}

东篱闲人 发表于 2022-4-15 18:56

红影 发表于 2022-4-15 13:59
我只看到了一半的图图，带山水的4张没看到呢

那那里下载慢。。。{:5_117:}

东篱闲人 发表于 2022-4-15 18:56

加林森 发表于 2022-4-15 17:30
老兄又制作了一个出来玩啊，挺漂亮的！ 清舟收礼开心！

嗯嗯，玩呗。。。{:5_117:}

加林森 发表于 2022-4-15 19:18

东篱闲人 发表于 2022-4-15 18:56
嗯嗯，玩呗。。。

好的好的，玩得雅致。。。{:4_199:}

东篱闲人 发表于 2022-4-15 19:24

加林森 发表于 2022-4-15 19:18
好的好的，玩得雅致。。。

来，一块雅致。。。。{:5_117:}

加林森 发表于 2022-4-15 19:28

东篱闲人 发表于 2022-4-15 19:24
来，一块雅致。。。。

玩不来你那些。。。{:4_170:}

樵歌 发表于 2022-4-15 20:37

东篱闲人 发表于 2022-4-15 12:38
通透。。。。

太美了，你师傅被封小区寂寞着就喜欢这些开心了

樵歌 发表于 2022-4-15 20:38

东篱闲人 发表于 2022-4-15 12:38
哪有虫？

花花背面有的{:4_189:}

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

樵歌 发表于 2022-4-15 20:37
太美了，你师傅被封小区寂寞着就喜欢这些开心了

还是你了解的多。。。{:5_116:}

绿叶清舟 发表于 2022-4-15 21:39

樵歌 发表于 2022-4-15 10:18
帮喊你小师傅@绿叶清舟

来了，谢谢樵歌

绿叶清舟 发表于 2022-4-15 21:40

谢谢东篱，俺得先刷一下再来{:4_190:}

绿叶清舟 发表于 2022-4-15 21:42

太厉害了，这样立体效果更强了，真棒啊{:4_199:}

红影 发表于 2022-4-15 23:28

东篱闲人 发表于 2022-4-15 18:56
那那里下载慢。。。

嗯嗯，我可能还得等一会才能看到。
页: [1] 2 3
查看完整版本: 梅兰竹菊 TO舟舟师傅