论坛 › 欢乐水吧 › 《端午节》（音乐欣赏）

加林森 发表于 2022-5-29 08:59

《端午节》（音乐欣赏）

<style>
.stage{
      margin: auto;
      position: relative;
      left: -214px;
      width: 1024px;
      height: 510px;
      background:#666 url('https://pic.imgdb.cn/item/6292c373094754312995a8da.jpg');
      perspective: 3000px;
      perspective-origin: 50% 50%;
      cursor: pointer;
}
.stage::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: url('https://638183.freep.cn/638183/Pic/2022/smoke1.gif') no-repeat center/cover;
      opacity: .1;
}
.circle {
      --x: 80px;
      position: absolute;
      width: var(--x);
      height: var(--x);
      right: 20px;
               top: 80px;
               left: 84px;
      transform-style: preserve-3d;
      animation: rot 5s linear infinite;
}
.circle div {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 1px solid #f0fcff;
      border-radius: 50%;
      padding: 0;
}
.circle div:nth-child(1){ transform:rotateY(0deg);}
.circle div:nth-child(2){ transform:rotateY(30deg);}
.circle div:nth-child(3){ transform:rotateY(60deg);}
.circle div:nth-child(4){ transform:rotateY(90deg);}
.circle div:nth-child(5){ transform:rotateY(120deg);}
.circle div:nth-child(6){ transform:rotateY(150deg);}
@keyframes rot{
      0%{ transform: rotateZ(30deg) rotateY(0turn);}
      100%{ transform: rotateZ(30deg) rotateY(1turn);}
}
</style>

<div class="stage">
      <div class="circle">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
      </div>
</div>

<script>
var au = document.createElement('audio');
au.src = 'https://www.joy127.com/url/90592.mp3';
au.loop = true;
au.autoplay = true;
document.querySelector('.stage').appendChild(au);
document.querySelector('.circle').onclick = function() {
      au.paused ? (au.play(), this.style.animationPlayState = 'running') : (au.pause(), this.style.animationPlayState = 'paused');
}
</script>

加林森 发表于 2022-5-29 09:00

端午节，又称端阳节、龙舟节、重五节、天中节等，是集拜神祭祖、祈福辟邪、欢庆娱乐和饮食为一体的民俗大节。端午节源于自然天象崇拜，由上古时代祭龙演变而来。

马黑黑 发表于 2022-5-29 10:17

端午很真的快到了，怪不得粥粥弄个屈原的帖子

加林森 发表于 2022-5-29 10:24

马黑黑 发表于 2022-5-29 10:17
端午很真的快到了，怪不得粥粥弄个屈原的帖子

是啊。6月3日就是端午节了。

马黑黑 发表于 2022-5-29 10:36

加林森 发表于 2022-5-29 10:24
是啊。6月3日就是端午节了。

时间过得真快

加林森 发表于 2022-5-29 10:53

马黑黑 发表于 2022-5-29 10:36
时间过得真快

是啊，不知不觉就快过半年了。

马黑黑 发表于 2022-5-29 11:12

加林森 发表于 2022-5-29 10:53
是啊，不知不觉就快过半年了。

但疫情就是没能过去

加林森 发表于 2022-5-29 11:16

马黑黑 发表于 2022-5-29 11:12
但疫情就是没能过去

疫情差不多快有三年了吧。

马黑黑 发表于 2022-5-29 11:26

加林森 发表于 2022-5-29 11:16
疫情差不多快有三年了吧。

19年年底到现在

加林森 发表于 2022-5-29 11:33

马黑黑 发表于 2022-5-29 11:26
19年年底到现在

是的，真是个大麻烦。

红影 发表于 2022-5-29 14:02

队长真漂亮的制作。端午要到了，借队长好帖同祝大家端午节快乐{:4_187:}

加林森 发表于 2022-5-29 14:06

红影 发表于 2022-5-29 14:02
队长真漂亮的制作。端午要到了，借队长好帖同祝大家端午节快乐

谢谢红影支持，共祝端午节快乐。

小辣椒 发表于 2022-5-29 15:02

借队长的美帖，祝大家端午节安康！

梦油 发表于 2022-5-29 15:27

加林森朋友端午安康！

加林森 发表于 2022-5-29 15:36

小辣椒 发表于 2022-5-29 15:02
借队长的美帖，祝大家端午节安康！

谢谢小辣椒支持！共祝大家端午节快乐！

加林森 发表于 2022-5-29 15:37

梦油 发表于 2022-5-29 15:27
加林森朋友端午安康！

老梦节日快乐！

梦油 发表于 2022-5-29 16:01

加林森 发表于 2022-5-29 15:37
老梦节日快乐！

你家包粽子了吗？

加林森 发表于 2022-5-29 16:07

梦油 发表于 2022-5-29 16:01
你家包粽子了吗？

没有，我家里现在好多的，都是别人送的。

醉美水芙蓉 发表于 2022-5-29 16:16

加林森 发表于 2022-5-29 16:18

醉美水芙蓉 发表于 2022-5-29 16:16
大家来队长家吃粽子啰！

欢迎欢迎

查看完整版本: 《端午节》（音乐欣赏）