东篱闲人 发表于 2022-4-13 16:56

十唱鹧鸪天 TO黑黑

本帖最后由 东篱闲人 于 2022-4-13 16:57 编辑 <br /><br /><style>
      .mnBox { position: relative; display: flex; justify-content: center; align-items: center; width: 1024px; height: 600px; left: -120px; 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/LKok40.jpg",
      "https://s1.ax1x.com/2022/04/13/LKoT2T.jpg",
         "https://s1.ax1x.com/2022/04/13/LKTLSf.jpg",
      "https://s1.ax1x.com/2022/04/13/LK7Pf0.jpg",
          "https://s1.ax1x.com/2022/04/13/LK7ukR.jpg",
      "https://s1.ax1x.com/2022/04/13/LKTLSf.jpg",
      "https://s1.ax1x.com/2022/04/13/LKHJ2V.jpg",
      "https://s1.ax1x.com/2022/04/13/LKHab4.jpg",
          "https://s1.ax1x.com/2022/04/13/LKTLSf.jpg",
          "https://s1.ax1x.com/2022/04/13/LKHqsS.jpg",
      "https://s1.ax1x.com/2022/04/13/LKb9zV.jpg",
      "https://s1.ax1x.com/2022/04/13/LKTLSf.jpg",
      "https://s1.ax1x.com/2022/04/13/LKbDeg.jpg",
          "https://s1.ax1x.com/2022/04/13/LKb6Fs.jpg",
      "https://s1.ax1x.com/2022/04/13/LKTLSf.jpg",
      
];
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=26178586.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 17:17

制作精美，很漂亮。赞！

红影 发表于 2022-4-13 18:10

也是十秒后的精彩呈现呢。东篱大哥做得这么快，而且这么雅致，很赞{:4_187:}

红影 发表于 2022-4-13 18:13

东篱大哥填了这么多首鹧鸪天，太厉害了。还一个个做成图图，太不容易了。黑黑收礼开心{:4_187:}

小九 发表于 2022-4-13 18:16

这个需要多少张图片呀{:4_199:}

马黑黑 发表于 2022-4-13 18:19

这个得细细欣赏

加林森 发表于 2022-4-13 18:24

老黑收礼开心。

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

加林森 发表于 2022-4-13 17:17
制作精美，很漂亮。赞！

初次学习，都是黑黑的功劳。。。{:5_116:}

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

红影 发表于 2022-4-13 18:10
也是十秒后的精彩呈现呢。东篱大哥做得这么快，而且这么雅致，很赞

谢谢红姑娘。。。。{:5_117:}

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

红影 发表于 2022-4-13 18:13
东篱大哥填了这么多首鹧鸪天，太厉害了。还一个个做成图图，太不容易了。黑黑收礼开心

瞎填呗，呆着干啥？{:5_117:}

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

小九 发表于 2022-4-13 18:16
这个需要多少张图片呀

十多张。。。{:4_190:}

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

东篱闲人 发表于 2022-4-13 19:02
初次学习，都是黑黑的功劳。。。

我也做了一个，九寨，你去看看。

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

马黑黑 发表于 2022-4-13 18:19
这个得细细欣赏

是这个意思吧？{:5_106:}

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

加林森 发表于 2022-4-13 19:03
我也做了一个，九寨，你去看看。

好的好的。。。

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

东篱闲人 发表于 2022-4-13 19:06
好的好的。。。

嗯嗯

马黑黑 发表于 2022-4-13 19:39

东篱闲人 发表于 2022-4-13 19:04
是这个意思吧？

是这个意思，好意思

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

马黑黑 发表于 2022-4-13 19:39
是这个意思，好意思

谢谢黑帅！{:5_161:}

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

这能耐，你老实在是高。{:4_199:}{:4_199:}

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

好有立体感，十赋，精彩。。{:4_204:}{:4_204:}

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

红芍药 发表于 2022-4-13 20:18
这能耐，你老实在是高。

家贫人丑，一米四九，不高。。。。{:5_111:}
页: [1] 2
查看完整版本: 十唱鹧鸪天 TO黑黑