冬天的雨 发表于 2022-5-31 18:25

【童心飞扬】和三小仙女一起过儿童节


<style>
.stage{
      margin: auto;
      position: relative;
      top:150px;left:-420px;
      width: 1400px;
      height: 780px;
      background: #666 url('https://pic.imgdb.cn/item/6295ec7e0947543129710a1a.jpg') no-repeat center/cover;
      perspective: 3000px;
      perspective-origin: 50% 50%;

}
.stage::before {
      content: '';
      top:250px;
      left:620px;
      position: absolute;
      width: 30%;
      height: 30%;
      background: url(' https://pic.imgdb.cn/item/6295ec9d094754312971335f.gif') no-repeat center/cover;
      opacity: .1;
}
.circle {
      --x: 80px;
      position: absolute;
      width: var(--x);
      height: var(--x);
      left: 150px;
      top: 320px;
      cursor: pointer;
      transform-style: preserve-3d;
      animation: rot 5s linear infinite;
}
.circle div {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 1px solid skyblue;
      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://music.163.com/song/media/outer/url?id=395627.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>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>><br><br><br>

冬天的雨 发表于 2022-5-31 18:26

@大猫咪

冬天的雨 发表于 2022-5-31 18:26

@千羽

冬天的雨 发表于 2022-5-31 18:26

水哥，没有你唱的好听@来看你

冬天的雨 发表于 2022-5-31 18:27

{:4_170:}{:4_189:}{:4_196:}{:4_205:}{:4_172:}

冬天的雨 发表于 2022-5-31 18:27

我们合唱一首{:4_208:}

冬天的雨 发表于 2022-5-31 18:27

一起过个快乐的儿童节{:4_170:}

小九 发表于 2022-5-31 18:57

感受到灿烂的笑容了{:4_187:}

红影 发表于 2022-5-31 19:52

四多向日葵，正好冬小雨和三位小仙女，真好。你们可以一起玩过家家了{:4_173:}

千羽 发表于 2022-5-31 20:08

冬天的雨 发表于 2022-5-31 18:26
@千羽

来了{:4_187:}

千羽 发表于 2022-5-31 20:09

冬雨这图选的漂亮{:4_187:}

千羽 发表于 2022-5-31 20:10

熟悉的歌儿好听{:4_187:}

千羽 发表于 2022-5-31 20:13

哈哈，一起开心玩起来{:4_177:}

醉美水芙蓉 发表于 2022-5-31 20:18

来看你 发表于 2022-5-31 20:21

哇，打开眼睛一亮 {:4_199:}

来看你 发表于 2022-5-31 20:22

四个祖国的花朵 {:4_187:}

来看你 发表于 2022-5-31 20:22

可以凑一桌麻将了 {:4_189:}

来看你 发表于 2022-5-31 20:22

冬小雨好创意 {:4_187:}

来看你 发表于 2022-5-31 20:26

冬天的雨 发表于 2022-5-31 18:26
水哥，没有你唱的好听@来看你

比我的好听一万十万千万倍 {:4_204:}

转转 发表于 2022-6-1 08:50

冬天的雨，哈哈哈，你野心太大哈，明显想做太阳的节奏{:4_172:}
页: [1] 2 3
查看完整版本: 【童心飞扬】和三小仙女一起过儿童节