论坛 › 《22年六一童心飞扬》 › 欢乐六一节 祝贺花潮六一活动拉开序幕

红影 发表于 2022-5-29 13:10

欢乐六一节 祝贺花潮六一活动拉开序幕

<style>
.mama {
      left: -252px;top:100px;
      width: 1100px;
      height: 600px;
      background: url('https://pic.imgdb.cn/item/6292f9e50947543129e46379.jpg') no-repeat;
      position: relative;
      box-shadow:00 8px #333;
      border-radius:12px;
}
.mBox {
        --w: 60px; /* 尺寸 */
        left:260px;
        top: 440px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--w);
        height: var(--w);
        cursor: pointer;
        position: relative;

        animation: rot 1.6s linear infinite;
}
.mBox span {
        position: absolute;
        width: inherit;
        height: inherit;
        display: block;
      background-color: #fff;
      background-image: radial-gradient(circle, red , #FFC125 4px, #F4A460 20px, red);
       
}
.mBox span:nth-child(1) { transform: rotate(0deg); }
.mBox span:nth-child(2) { transform: rotate(120deg); }
.mBox span:nth-child(3) { transform: rotate(240deg); }
.mBox span:nth-child(4) { width: 8px; height: 8px; border-radius: 50%; }

@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div class="mama">
      <div class="mBox"><span></span><span></span><span></span><span></span></div>
      <div style="position: absolute; left:0px; top: 0px; width:313px;">
                <img alt="" src="https://pic.imgdb.cn/item/6292fb5e0947543129e7157b.gif" /></div>

      <div style="position: absolute; left:520px; top: 200px; width:100px; ">
                <img alt="" src="https://pic.imgdb.cn/item/6292fbac0947543129e7a2d5.gif"/></div>

      <div style="position: absolute;right:-90px; bottom: -30px; width:489px; ">
                <img alt="" src="https://pic.imgdb.cn/item/6292fd5e0947543129eafd06.gif"/></div>   

   
      </div><br><br><br><br><br><br>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1487290962.mp3"

autoplay="autoplay" loop="loop"></audio>
</div>


<script>
let controler = document.querySelector('.mBox');
let aud = document.querySelector('#aud');
let task = aud.duration, current;

controler.onclick = () =>{
      aud.paused ? aud.play() : aud.pause();
}
</script>

红影 发表于 2022-5-29 13:12

活动即将开始，欢迎大家积极参加。放下烦恼，一起过一个欢乐美好的儿童节{:4_177:}

红影 发表于 2022-5-29 13:12

活动详情请见
花潮论坛2022年六一活动： 往事的光圈- 童心飞扬
https://www.huachaowang.com/forum.php?mod=viewthread&tid=59944&fromuid=2
(出处: 花潮论坛)

梦油 发表于 2022-5-29 13:30

祝花潮家园的子子孙孙以及他们的长辈节日快乐

       我将积极参与花潮论坛欢乐六一儿童节的活动

小辣椒 发表于 2022-5-29 13:46

亲爱的，好热闹的，漂亮的贺帖{:4_177:}

顾-念 发表于 2022-5-29 14:08

这图烘托了气氛

小九 发表于 2022-5-29 14:48

这歌让我们瞬间回到童年时光{:4_187:}

四海八荒 发表于 2022-5-29 15:10

熟悉的旋律，带我们回到童年{:4_204:}

千羽 发表于 2022-5-29 15:13

这歌挺好听的，很有号召力的美图啊，序幕拉开了{:4_187:}

转转 发表于 2022-5-29 16:12

友友们六一快乐，影子六一快乐{:4_177:}

来看你 发表于 2022-5-29 17:24

欢度六一 ，六一快乐 {:4_177:}

红芍药 发表于 2022-5-29 17:30

仿佛回到了童年，一起欢度。{:4_187:}

加林森 发表于 2022-5-29 22:17

很给力的歌曲。我们回到了童年了。

查看完整版本: 欢乐六一节 祝贺花潮六一活动拉开序幕