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

古风人物


<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/6315e9ad16f2c2beb19d69e6.jpg",
         "https://pic.imgdb.cn/item/6315e9e016f2c2beb19d9e3b.png",
      "https://pic.imgdb.cn/item/6315e9ad16f2c2beb19d69e6.jpg",
          "https://pic.imgdb.cn/item/6315e9f616f2c2beb19db405.png",
      "https://pic.imgdb.cn/item/6315e9ad16f2c2beb19d69e6.jpg",
      "https://pic.imgdb.cn/item/6315ea2216f2c2beb19dde7b.png",
      "https://pic.imgdb.cn/item/6315e9ad16f2c2beb19d69e6.jpg",
      "https://pic.imgdb.cn/item/6315ea3d16f2c2beb19df958.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=1384127698.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 20:53

老头这个图图好像上去了一点，还可以啦下来一点

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

这个效果我没有做过，老头你是越来越厉害了{:4_178:}

红影 发表于 2022-9-5 21:06

东篱大哥又一个八扇屏效果呢，这次不是文字镂空，而是人物镂空了，一样很漂亮{:4_199:}

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

小辣椒 发表于 2022-9-5 20:54
这个效果我没有做过，老头你是越来越厉害了

这个还算容易，师傅快做。。。{:5_117:}

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

红影 发表于 2022-9-5 21:06
东篱大哥又一个八扇屏效果呢，这次不是文字镂空，而是人物镂空了，一样很漂亮

挨个镂。。。。{:5_106:}

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

又开始转了。{:5_117:}

小辣椒 发表于 2022-9-5 21:15

东篱闲人 发表于 2022-9-5 21:13
这个还算容易，师傅快做。。。

我最近会少玩，就简单的图弄一个玩玩了

大猫咪 发表于 2022-9-5 21:16

古色古香，唯美清新 意境悠扬， 创意真漂亮，老头真棒！赞！

{:4_204:}{:4_199:}{:4_179:}

马黑黑 发表于 2022-9-5 21:21

这个不挖孔，装的是透明玻璃，挺好，不用偷看了{:4_170:}

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

小辣椒 发表于 2022-9-5 21:15
我最近会少玩，就简单的图弄一个玩玩了

嗯嗯。。。{:4_190:}

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

大猫咪 发表于 2022-9-5 21:16
古色古香，唯美清新 意境悠扬， 创意真漂亮，老头真棒！赞！

瞎玩，闲的。。。{:5_117:}

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

马黑黑 发表于 2022-9-5 21:21
这个不挖孔，装的是透明玻璃，挺好，不用偷看了

直接看。。。。{:5_106:}

梦缘 发表于 2022-9-5 21:44

漂亮，好看，问好老师！{:4_204:}

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

梦缘 发表于 2022-9-5 21:44
漂亮，好看，问好老师！

{:4_176:}

红影 发表于 2022-9-5 22:25

东篱闲人 发表于 2022-9-5 21:13
挨个镂。。。。

看谁不顺眼镂谁{:4_173:}

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

红影 发表于 2022-9-5 22:25
看谁不顺眼镂谁

{:4_181:}{:4_172:}

红影 发表于 2022-9-5 22:34

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


好像说反了，是看谁好看镂谁才对{:4_173:}

马黑黑 发表于 2022-9-5 22:42

东篱闲人 发表于 2022-9-5 21:24
直接看。。。。

开放的，挺好
页: [1]
查看完整版本: 古风人物