东篱闲人 发表于 2022-9-5 18:49

流光容易把人抛

本帖最后由 东篱闲人 于 2022-9-5 19:42 编辑 <br /><br /><style>
      .mnBox { position: relative; display: flex; justify-content: center; align-items: center; width: 1024px; height: 600px; left: -120px; perspective: 1000px; }
      .imgBox { --w: 290px; --h: 460px; 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://pic.imgdb.cn/item/6315d33916f2c2beb184eb03.jpg",
         "https://pic.imgdb.cn/item/6315d30116f2c2beb184b411.png",
      "https://pic.imgdb.cn/item/6315d35016f2c2beb1850406.jpg",
          "https://pic.imgdb.cn/item/6315d30116f2c2beb184b411.png",
      "https://pic.imgdb.cn/item/6315d36716f2c2beb1851e66.jpg",
      "https://pic.imgdb.cn/item/6315d30116f2c2beb184b411.png",
      "https://pic.imgdb.cn/item/6315d37c16f2c2beb185366e.jpg",
      "https://pic.imgdb.cn/item/6315d30116f2c2beb184b411.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=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-9-5 19:16

这回，洞是挖墙上的，好创意！

东篱闲人 发表于 2022-9-5 19:26

马黑黑 发表于 2022-9-5 19:16
这回，洞是挖墙上的，好创意！

嗯嗯，透点亮，免得闷。。。。{:5_117:}

红影 发表于 2022-9-5 19:26

东篱大哥的八扇屏制作总是那么美伦美央，人物图和文字幅面都很难美。只是上面的字有点小，本来想仔细欣赏一下文字，看得太累眼睛了{:4_173:}

马黑黑 发表于 2022-9-5 19:27

东篱闲人 发表于 2022-9-5 19:26
嗯嗯，透点亮，免得闷。。。。

不会是照壁偷观光吧{:4_170:}

东篱闲人 发表于 2022-9-5 19:37

红影 发表于 2022-9-5 19:26
东篱大哥的八扇屏制作总是那么美伦美央，人物图和文字幅面都很难美。只是上面的字有点小，本来想仔细欣赏一 ...

图片数量较少，图片就小。如果数量在多点，图片就大了。。。。

东篱闲人 发表于 2022-9-5 19:37

马黑黑 发表于 2022-9-5 19:27
不会是照壁偷观光吧

你有这爱好？{:4_172:}

东篱闲人 发表于 2022-9-5 19:43

红影 发表于 2022-9-5 19:26
东篱大哥的八扇屏制作总是那么美伦美央，人物图和文字幅面都很难美。只是上面的字有点小，本来想仔细欣赏一 ...

俺发现这个还能设置，现在大点了。。。{:5_117:}

马黑黑 发表于 2022-9-5 19:57

东篱闲人 发表于 2022-9-5 19:37
你有这爱好？

没必要

梦缘 发表于 2022-9-5 20:05

这个洞中天相连，好有创意，欣赏点赞！{:4_171:}

大猫咪 发表于 2022-9-5 20:19

真漂亮！经典！ 好久不见想念俺家老头，紧紧拥抱一个，{:4_179:}继续温暖 {:4_187:}

东篱闲人 发表于 2022-9-5 20:32

梦缘 发表于 2022-9-5 20:05
这个洞中天相连，好有创意，欣赏点赞！

{:4_180:}

东篱闲人 发表于 2022-9-5 20:32

大猫咪 发表于 2022-9-5 20:19
真漂亮！经典！ 好久不见想念俺家老头，紧紧拥抱一个，继续温暖

猫猫来啦，都快把俺想疯了。。。。{:5_157:}

大猫咪 发表于 2022-9-5 20:36

东篱闲人 发表于 2022-9-5 20:32
猫猫来啦，都快把俺想疯了。。。。

来了来了老头！看见你好温暖，来走一个，{:4_191:}好好温暖{:4_179:}

东篱闲人 发表于 2022-9-5 20:41

大猫咪 发表于 2022-9-5 20:36
来了来了老头！看见你好温暖，来走一个，好好温暖

{:4_181:}{:4_176:}

小辣椒 发表于 2022-9-5 20:47

老头，这个是黑黑前面分享的我都没有做过这个效果

小辣椒 发表于 2022-9-5 20:47

仔细看了，每个图片都很精致{:4_199:}

东篱闲人 发表于 2022-9-5 21:12

小辣椒 发表于 2022-9-5 20:47
老头，这个是黑黑前面分享的我都没有做过这个效果

师傅赶紧做个。。。。{:5_112:}

加林森 发表于 2022-9-5 21:32

好听好看。老兄真厉害！

东篱闲人 发表于 2022-9-5 21:36

加林森 发表于 2022-9-5 21:32
好听好看。老兄真厉害！

觉得这个挺好玩的。。。{:5_117:}
页: [1] 2
查看完整版本: 流光容易把人抛