东篱闲人 发表于 2022-4-15 19:00

春归 TO红芍药

本帖最后由 东篱闲人 于 2022-4-15 21:05 编辑 <br /><br /><style>
      .mnBox { position: relative; display: flex; justify-content: center; align-items: center; width: 1024px; height: 600px; left: -150px;TOP:50px; perspective: 1000px; }
      .imgBox { --w: 240px; --h: 500px; 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/15/L8f76K.jpg",
      "https://s1.ax1x.com/2022/04/15/L84hxx.png",
         "https://s1.ax1x.com/2022/04/15/L8fL0e.jpg",
      "https://s1.ax1x.com/2022/04/15/L84hxx.png",
      "https://s1.ax1x.com/2022/04/15/L8hCX8.jpg",
         "https://s1.ax1x.com/2022/04/15/L84hxx.png",
          "https://s1.ax1x.com/2022/04/15/L8hVts.jpg",
      "https://s1.ax1x.com/2022/04/15/L84hxx.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=1900820735.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 30s linear infinite";
},10000);

</script>

红芍药 发表于 2022-4-15 20:02

题目改一下，去掉“回礼”两字，这两个字不好看。{:4_189:}

红芍药 发表于 2022-4-15 20:03

春天归来了，满眼春色，一个字“美”{:4_204:}{:4_204:}

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

红芍药 发表于 2022-4-15 20:02
题目改一下，去掉“回礼”两字，这两个字不好看。

好说。。。{:5_117:}

红芍药 发表于 2022-4-15 20:05

哈哈，搬来了百花园，整个春天都送给了俺，靓丽，你老真能豆。{:4_189:}

红芍药 发表于 2022-4-15 20:06

谢啦，这么厚重的礼物，美美哒扛走袅。你老辛苦袅。{:4_184:}

红芍药 发表于 2022-4-15 20:07

东篱闲人 发表于 2022-4-15 20:04
好说。。。

嗯，这样TO得多漂酿。{:4_189:}

红芍药 发表于 2022-4-15 20:17

苔径临江竹，茅檐覆地花。
别来频甲子，倏忽又春华。
你是现代哒杜甫{:4_181:}

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

红芍药 发表于 2022-4-15 20:05
哈哈，搬来了百花园，整个春天都送给了俺，靓丽，你老真能豆。

嗯嗯，都是你的，玩吧。。。{:5_117:}

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

红芍药 发表于 2022-4-15 20:17
苔径临江竹，茅檐覆地花。
别来频甲子，倏忽又春华。
你是现代哒杜甫

杜甫长的愁眉苦脸的，不如俺慈祥。。。{:5_117:}

红影 发表于 2022-4-15 23:33

这个图片能看到，缤纷绚丽，真漂亮。芍药收礼开心{:4_187:}

小九 发表于 2022-4-16 09:14

怎么看到的图图很小呢？ 莫非是我的电脑有问题{:4_187:}

红芍药 发表于 2022-4-16 09:32

东篱闲人 发表于 2022-4-15 20:25
杜甫长的愁眉苦脸的，不如俺慈祥。。。

哈哈，你老可以和他相媲美。{:4_189:}

红芍药 发表于 2022-4-16 09:32

东篱闲人 发表于 2022-4-15 20:24
嗯嗯，都是你的，玩吧。。。

哈哈，好玩好玩。。{:4_189:}

马黑黑 发表于 2022-4-16 10:31

这是用心之作，古色古香，精美雅致，文采与美学的结合无与比肩

大猫咪 发表于 2022-4-16 13:30

老头制作真漂亮， 恬静高雅    看着特别舒服，真棒！ 芍药收礼开心！周末快乐！


{:4_204:}{:4_190:}

东篱闲人 发表于 2022-4-16 18:37

红芍药 发表于 2022-4-16 09:32
哈哈，你老可以和他相媲美。

俺比他漂亮！{:5_116:}

东篱闲人 发表于 2022-4-16 18:39

马黑黑 发表于 2022-4-16 10:31
这是用心之作，古色古香，精美雅致，文采与美学的结合无与比肩

谢谢黑帅！{:4_176:}

马黑黑 发表于 2022-4-16 19:30

东篱闲人 发表于 2022-4-16 18:39
谢谢黑帅！

换个杯
{:4_191:}

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

马黑黑 发表于 2022-4-16 19:30
换个杯

黑帅雅致！{:5_116:}
页: [1] 2
查看完整版本: 春归 TO红芍药