东篱闲人 发表于 2022-9-7 19:18

纳兰词

本帖最后由 东篱闲人 于 2022-9-7 21:01 编辑 <br /><br /><br><br><br><br><br><br><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/6318792016f2c2beb112d941.jpg",
         "https://pic.imgdb.cn/item/63187a9e16f2c2beb11538fd.png",
      "https://pic.imgdb.cn/item/6318792016f2c2beb112d941.jpg",
          "https://pic.imgdb.cn/item/631879b916f2c2beb1139cec.png",
      "https://pic.imgdb.cn/item/6318792016f2c2beb112d941.jpg",
      "https://pic.imgdb.cn/item/63187b7b16f2c2beb1162d6d.png",
      "https://pic.imgdb.cn/item/6318792016f2c2beb112d941.jpg",
      "https://pic.imgdb.cn/item/631879e516f2c2beb113d6d4.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=40257010.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><br><br><br><br>

红影 发表于 2022-9-7 19:58

这个漂亮，不但有纳兰的美词，还有漂亮的书法。欣赏东篱大哥好词{:4_187:}

加林森 发表于 2022-9-7 20:02

老兄制作得太美了。大清朝第一大才子。{:4_208:}

东篱闲人 发表于 2022-9-7 20:04

红影 发表于 2022-9-7 19:58
这个漂亮，不但有纳兰的美词，还有漂亮的书法。欣赏东篱大哥好词

人家纳兰的词，啥时候成俺的啦？{:5_117:}

东篱闲人 发表于 2022-9-7 20:04

加林森 发表于 2022-9-7 20:02
老兄制作得太美了。大清朝第一大才子。

嗯嗯，文武双全。。。。{:5_116:}

马黑黑 发表于 2022-9-7 20:10

高雅、沉稳，力量包含在含蓄中。赞，大赞。

红影 发表于 2022-9-7 20:11

东篱闲人 发表于 2022-9-7 20:04
人家纳兰的词，啥时候成俺的啦？

打错字了，是好帖{:4_173:}

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

还有一张是透明书法呢，有意思。

加林森 发表于 2022-9-7 20:13

东篱闲人 发表于 2022-9-7 20:04
嗯嗯，文武双全。。。。

是的。

东篱闲人 发表于 2022-9-7 20:14

红影 发表于 2022-9-7 20:11
打错字了，是好帖

{:5_117:}

东篱闲人 发表于 2022-9-7 20:14

马黑黑 发表于 2022-9-7 20:10
高雅、沉稳，力量包含在含蓄中。赞，大赞。

多谢黑黑。。。。{:4_180:}

东篱闲人 发表于 2022-9-7 20:16

加林森 发表于 2022-9-7 20:13
是的。

才高命短啊。。。。。{:5_103:}

加林森 发表于 2022-9-7 20:18

东篱闲人 发表于 2022-9-7 20:16
才高命短啊。。。。。

天妒奇才。。。

马黑黑 发表于 2022-9-7 20:19

东篱闲人 发表于 2022-9-7 20:14
多谢黑黑。。。。

客气了。

红芍药 发表于 2022-9-7 20:36

平生最爱纳兰词，你老轱辘转得真好，俺居然米晕。。{:4_174:}

红芍药 发表于 2022-9-7 20:38

待了好长时间，静听纳兰心声。。{:4_204:}{:4_204:}

东篱闲人 发表于 2022-9-7 21:00

红芍药 发表于 2022-9-7 20:36
平生最爱纳兰词，你老轱辘转得真好，俺居然米晕。。

好久没来，忙啥呢？{:5_117:}

红芍药 发表于 2022-9-7 21:05

东篱闲人 发表于 2022-9-7 21:00
好久没来，忙啥呢？

真的是好久米来了，都隔了好几个秋了。{:4_189:}

东篱闲人 发表于 2022-9-7 21:07

红芍药 发表于 2022-9-7 21:05
真的是好久米来了，都隔了好几个秋了。

{:4_181:}
页: [1]
查看完整版本: 纳兰词