东篱闲人 发表于 2022-4-13 18:57

Craigie hill TO加加

<style>
      .mnBox { position: relative; display: flex; justify-content: center; align-items: center; width: 1024px; height: 600px; left: -150px; perspective: 1000px; }
      .imgBox { --w: 190px; --h: 360px; 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/13/LM3XgH.gif",
      "https://s1.ax1x.com/2022/04/13/LM8Sbt.gif",
         "https://s1.ax1x.com/2022/04/13/LM89VP.gif",
      "https://s1.ax1x.com/2022/04/13/LM8A2Q.gif",
          "https://s1.ax1x.com/2022/04/13/LM8TMj.gif",
      "https://s1.ax1x.com/2022/04/13/LMGFdx.gif",
      "https://s1.ax1x.com/2022/04/13/LMGmSe.gif",
      "https://s1.ax1x.com/2022/04/13/LMGKOA.gif",
          "https://s1.ax1x.com/2022/04/13/LMGaOs.gif",
          "https://s1.ax1x.com/2022/04/13/LMGsYT.gif",
      "https://s1.ax1x.com/2022/04/13/LMGcpF.gif",
      "https://s1.ax1x.com/2022/04/13/LMGfmR.gif",
      "https://s1.ax1x.com/2022/04/13/LMGTfO.gif",
          "https://s1.ax1x.com/2022/04/13/LMJStf.gif",
      "https://s1.ax1x.com/2022/04/13/LMJicQ.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`;
      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=17110575.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 80s linear infinite";
},10000);

</script>

红影 发表于 2022-4-13 19:07

这个厉害了，连续画面裁出来的呢。东篱大哥玩出了新花样{:4_187:}

红影 发表于 2022-4-13 19:08

队长快来收礼@加林森 {:4_187:}

东篱闲人 发表于 2022-4-13 19:09

红影 发表于 2022-4-13 19:07
这个厉害了，连续画面裁出来的呢。东篱大哥玩出了新花样

瞎玩。。。。{:5_111:}

加林森 发表于 2022-4-13 19:12

红影 发表于 2022-4-13 19:08
队长快来收礼@加林森

来了来了。谢谢红影！{:4_204:}

加林森 发表于 2022-4-13 19:14

老兄厉害啊，把画面全部连接起来了，制作得真漂亮。为你喝彩！{:4_199:}
谢谢老兄的好礼物。{:5_108:}

东篱闲人 发表于 2022-4-13 19:26

加林森 发表于 2022-4-13 19:14
老兄厉害啊，把画面全部连接起来了，制作得真漂亮。为你喝彩！
谢谢老兄的好礼物。

别客气，喝水。。。。{:4_176:}

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

东篱闲人 发表于 2022-4-13 19:26
别客气，喝水。。。。

谢谢，来吧，喝水：{:4_176:}

千羽 发表于 2022-4-13 20:06

这是胖大号的美景{:4_205:}

红芍药 发表于 2022-4-13 20:17

好听，好看，鼓掌。。{:4_199:}{:4_199:}

红芍药 发表于 2022-4-13 20:17

好聪的脑袋。。{:4_173:}

东篱闲人 发表于 2022-4-13 20:19

红芍药 发表于 2022-4-13 20:17
好聪的脑袋。。

词挺新颖的。。。{:5_117:}

红影 发表于 2022-4-13 21:52

东篱闲人 发表于 2022-4-13 19:09
瞎玩。。。。

这样做的效果特别好，跟环幕电影似的，太赞了{:4_199:}
页: [1]
查看完整版本: Craigie hill TO加加