有声有色 发表于 2022-9-9 13:02

学习TO东篱闲人镂空边框

</div>
</div><div class="pct"><style type="text/css">.pcb{margin-right:0}</style><div class="pcb">

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1702279">
<i class="pstatus"></i><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/6319994616f2c2beb1142473.gif",
         "https://pic.imgdb.cn/item/63196b9516f2c2beb1e16032.png",
      "https://pic.imgdb.cn/item/6319995f16f2c2beb11444f6.gif",
          "https://pic.imgdb.cn/item/6319676816f2c2beb1dcb75a.png",
      "https://pic.imgdb.cn/item/6319997c16f2c2beb1146739.gif",
      "https://pic.imgdb.cn/item/63196b9516f2c2beb1e16032.png",
      "https://pic.imgdb.cn/item/6319999e16f2c2beb1148f60.gif",
      "https://pic.imgdb.cn/item/6319676816f2c2beb1dcb75a.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>
</td></tr></table>

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

精彩！{:5_116:}

有声有色 发表于 2022-9-9 13:38

东篱闲人 发表于 2022-9-9 13:09
精彩！

谢谢鼓励

小辣椒 发表于 2022-9-9 13:58

有声有色很好学，而且制作非常精彩，向老人家学习{:4_187:}

有声有色 发表于 2022-9-9 14:08

小辣椒 发表于 2022-9-9 13:58
有声有色很好学，而且制作非常精彩，向老人家学习

谢谢鼓励

红影 发表于 2022-9-9 14:25

这个镂空做得好棒，非常漂亮，会PS就是好啊{:4_187:}

有声有色 发表于 2022-9-9 14:43

红影 发表于 2022-9-9 14:25
这个镂空做得好棒，非常漂亮，会PS就是好啊

谢谢鼓励，我觉得PS对做音画很有帮助

梦缘 发表于 2022-9-9 16:34

欣赏老师的精彩分享，制作好看！{:4_204:}

有声有色 发表于 2022-9-9 17:09

梦缘 发表于 2022-9-9 16:34
欣赏老师的精彩分享，制作好看！

谢谢支持

马黑黑 发表于 2022-9-9 18:27

学的很像

红影 发表于 2022-9-9 20:12

有声有色 发表于 2022-9-9 14:43
谢谢鼓励，我觉得PS对做音画很有帮助

那是当然，这个软件还是很强大的{:4_187:}

有声有色 发表于 2022-9-10 07:47

马黑黑 发表于 2022-9-9 18:27
学的很像

谢谢老师鼓励，我是照葫芦画瓢

马黑黑 发表于 2022-9-10 07:48

有声有色 发表于 2022-9-10 07:47
谢谢老师鼓励，我是照葫芦画瓢

学习新的东西，总是要从模仿开始的

有声有色 发表于 2022-9-10 07:48

红影 发表于 2022-9-9 20:12
那是当然，这个软件还是很强大的

是的，对PS我也知道点皮毛，还的继续学习

有声有色 发表于 2022-9-10 07:55

马黑黑 发表于 2022-9-10 07:48
学习新的东西，总是要从模仿开始的

明白了

红影 发表于 2022-9-10 17:07

有声有色 发表于 2022-9-10 07:48
是的，对PS我也知道点皮毛，还的继续学习

能做这么好，你已经难很厉害了{:4_187:}

有声有色 发表于 2022-9-11 08:40

红影 发表于 2022-9-10 17:07
能做这么好，你已经难很厉害了

谢谢鼓励

红影 发表于 2022-9-11 10:23

有声有色 发表于 2022-9-11 08:40
谢谢鼓励

不客气，问好{:4_187:}
页: [1]
查看完整版本: 学习TO东篱闲人镂空边框