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

茶禅一味 TO加加

<style>
      .mnBox { position: relative; display: flex; justify-content: center; align-items: center; width: 1024px; height: 700px; left: -150px;TOP:30px; perspective: 1000px; }
      .imgBox { --w: 170px; --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/15/LG8iM8.jpg",
      "https://s1.ax1x.com/2022/04/15/LG8NJ1.png",
         "https://s1.ax1x.com/2022/04/15/LG8Vaj.jpg",
      "https://s1.ax1x.com/2022/04/15/LG8NJ1.png",
      "https://s1.ax1x.com/2022/04/15/LG8KzV.jpg",
         "https://s1.ax1x.com/2022/04/15/LG8NJ1.png",
          "https://s1.ax1x.com/2022/04/15/LG88Z4.jpg",
      "https://s1.ax1x.com/2022/04/15/LG8NJ1.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=465920323.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 18:57

老兄又送礼物给我啦，好精美的制作，真漂亮。我就慢慢品味啦。谢谢！

加林森 发表于 2022-4-16 18:58

老兄好制作。{:5_161:}

东篱闲人 发表于 2022-4-16 19:01

加林森 发表于 2022-4-16 18:57
老兄又送礼物给我啦，好精美的制作，真漂亮。我就慢慢品味啦。谢谢！

你喜欢俺就高兴。。。。{:5_117:}

东篱闲人 发表于 2022-4-16 19:04

加林森 发表于 2022-4-16 18:58
老兄好制作。

左手书卷，右手清茶，禅缘如水，教授生涯。。。。{:5_116:}

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

东篱闲人 发表于 2022-4-16 19:04
左手书卷，右手清茶，禅缘如水，教授生涯。。。。

同品味才好，谢谢啦！

东篱闲人 发表于 2022-4-16 19:11

加林森 发表于 2022-4-16 19:08
同品味才好，谢谢啦！

你看，和俺还客气个啥？{:4_172:}

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

东篱闲人 发表于 2022-4-16 19:01
你喜欢俺就高兴。。。。

很开心很感谢。{:4_189:}

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

东篱闲人 发表于 2022-4-16 19:11
你看，和俺还客气个啥？

必须的嘛，这么大的礼物，加加很开心的。来来来，喝水：{:4_176:}

东篱闲人 发表于 2022-4-16 19:27

加林森 发表于 2022-4-16 19:21
必须的嘛，这么大的礼物，加加很开心的。来来来，喝水：

喝！{:4_176:}{:5_117:}

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

禅意十足，好制作，你老聪明。。{:4_199:}{:4_199:}

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

透明小窗特别有创意

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

红芍药 发表于 2022-4-16 19:30
禅意十足，好制作，你老聪明。。

都老糊涂了。。。{:5_117:}

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

马黑黑 发表于 2022-4-16 19:32
透明小窗特别有创意

{:4_180:}

马黑黑 发表于 2022-4-16 20:12

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


蟹蟹

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

马黑黑 发表于 2022-4-16 20:12
蟹蟹

海鲜啊？没有。。。{:5_117:}

马黑黑 发表于 2022-4-16 20:16

东篱闲人 发表于 2022-4-16 20:15
海鲜啊？没有。。。

团购，加入绿叶清舟的她的团长她的团

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

浮浮沉沉阅尽千山万水 苦涩甘甜都在清茶一杯 ，老头真棒，耐品 {:4_190:}队长收礼开心！


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

红芍药 发表于 2022-4-16 20:27

东篱闲人 发表于 2022-4-16 20:11
都老糊涂了。。。

眼神好就行{:4_189:}

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

马黑黑 发表于 2022-4-16 20:16
团购，加入绿叶清舟的她的团长她的团

不吃。海鲜只吃盐。。。{:5_117:}
页: [1] 2 3
查看完整版本: 茶禅一味 TO加加