论坛 › 欢乐水吧 › 《守沪》TO 馨雨萦儿 绿叶清舟

红影 发表于 2022-4-15 11:16

《守沪》TO 馨雨萦儿 绿叶清舟

<style>

.shouhu { position: relative;left: -304px;top:120px;width: 1200px; height: 675px;display: flex; perspective: 2000px;background: #eee url('https://pic.imgdb.cn/item/62584cca239250f7c5a3113c.jpg') no-repeat center/cover; box-shadow: 4px 4px 5px #888;border-radius:12px; }

.cube {
      --x: 200px;
      --xx: -100px;
      position: absolute;left: 630px;top:136px;cursor: pointer;
      width: var(--x);
      height: var(--x);
      transform-style: preserve-3d;
      transform-origin: 50% 50% 0;
      animation: rot 10s linear infinite;
}

.cube div {
      position: absolute;
      left: 0; top: 0; width: inherit; height: inherit;
      font: 2em / var(--x) Arial;
      color: white;
      text-align: center;
      text-shadow: 1px 1px 2px #000;
      opacity: .85;
}

.cube div:nth-child(1) { background: #ffffcc; transform: rotateY(0deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(2) { background: #ffccff; transform: rotateY(90deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(3) { background: #ccffcc; transform: rotateY(180deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(4) { background: #CFCFCF; transform:rotateY(270deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(5) { background: #FFAEB9; transform: rotateX(-90deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(6) {background: #CDAF95; transform: rotateX(-90deg) translateZ(var(--xx)); }

@keyframes rot {
      to { transform: rotateX(-720deg) rotateY(360deg); }
}

</style>

<div class="shouhu">        <div class="cube">
      <div>上海</div>
      <div>平安</div>
      <div>坚强</div>
      <div>守沪</div>
      <div>希望</div>
      <div>必胜</div>
</div></div><br><br><br><br><br><br><br><br>

<script language="javascript">
let iBox = document.querySelector(".cube");
let au = document.createElement("audio");
au.src = "https://music.163.com/song/media/outer/url?id=1937681088.mp3";
au.autoplay = true;
au.loop = true;
iBox.onclick = function() {
        au.paused ? (au.play(), this.style.animationPlayState = "running") : (au.pause(), this.style.animationPlayState = "paused");
}

</script>

红芍药 发表于 2022-4-15 11:19

相信很快就会过去哒，大上海安然无恙。。{:4_199:}{:4_199:}

红影 发表于 2022-4-15 11:19

@馨雨萦儿感谢萦儿送给所有上海坛友的礼物，在这个非常时期，我们同城守望相助，彼此珍重{:4_187:}

@绿叶清舟时常和清舟聊聊彼此小区的情况，感觉很安慰，有种不独伤心是小青的感觉。我们都是封控区，彼此努力，团购还是要抢的，生活还是要过得很有品位的，风雨过后是彩虹{:4_187:}

红芍药 发表于 2022-4-15 11:21

在这个非常时期，我们同城守望相助，彼此珍重。。{:4_176:}

红影 发表于 2022-4-15 11:21

队长，这个旋转魔方我把音乐关联了，只是没去让鼠标移动上去转动停止。本来想把黑黑的这两个功能都套用过来，想想还是只关联音乐吧@加林森

红影 发表于 2022-4-15 11:22

继续坚持下去，魔都一定为走出阴霾的{:4_178:}

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

祝所有在上海的朋友们安康{:4_204:}

加林森 发表于 2022-4-15 12:36

红影 发表于 2022-4-15 11:21
队长，这个旋转魔方我把音乐关联了，只是没去让鼠标移动上去转动停止。本来想把黑黑的这两个功能都套用过来 ...

谢谢红影。我研究研究。{:4_199:}

加林森 发表于 2022-4-15 12:38

上海加油，朋友们加油！{:5_154:}

红影 发表于 2022-4-15 12:51

红芍药 发表于 2022-4-15 11:19
相信很快就会过去哒，大上海安然无恙。。

芍药真快，多谢，希望早点解封{:4_204:}

红影 发表于 2022-4-15 12:52

加林森 发表于 2022-4-15 12:36
谢谢红影。我研究研究。

和以前音乐关联的都一样的呢。

红芍药 发表于 2022-4-15 12:55

红影 发表于 2022-4-15 12:51
芍药真快，多谢，希望早点解封

嗯，早点过去吧。。{:4_187:}

加林森 发表于 2022-4-15 13:30

红影 发表于 2022-4-15 12:52
和以前音乐关联的都一样的呢。

嗯嗯，明白了。谢谢！{:4_204:}

红影 发表于 2022-4-15 13:47

红芍药 发表于 2022-4-15 12:55
嗯，早点过去吧。。

已经被关得不知道在阳光下是什么滋味了{:4_173:}

红影 发表于 2022-4-15 13:48

加林森 发表于 2022-4-15 12:38
上海加油，朋友们加油！

多谢队长，上海一定能挺过去的{:4_178:}

加林森 发表于 2022-4-15 13:50

红影 发表于 2022-4-15 13:48
多谢队长，上海一定能挺过去的

会的会的，全国都为你们加油的。

红影 发表于 2022-4-15 13:53

加林森 发表于 2022-4-15 13:50
会的会的，全国都为你们加油的。

是啊，每天有好多省市在支援上海。

加林森 发表于 2022-4-15 13:55

红影 发表于 2022-4-15 13:53
是啊，每天有好多省市在支援上海。

是的。快去收礼，我送你的。

绿叶清舟 发表于 2022-4-15 21:38

红影 发表于 2022-4-15 11:19
@馨雨萦儿感谢萦儿送给所有上海坛友的礼物，在这个非常时期，我们同城守望相助，彼此珍重

@ ...

来了，谢谢{:4_179:}腿碰脚的{:4_189:}

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

坚持下去，一定会战胜恶魔！{:4_178:}

查看完整版本: 《守沪》TO 馨雨萦儿 绿叶清舟