红影 发表于 2022-7-8 16:46

三伏消暑活动主持群入场（学习黑黑图片出场模式）

<style>
#papa {
      left: -202px;top: 120px;
      width: 1000px;
      height: 600px;
      border: 1px solid;
      overflow: hidden;
      position: relative;
}
.shipin {
      position: absolute;
      width: 1000px;
      height: 655px;
      top:-55px;
      object-fit: cover;      
}
.piece {
      position: absolute;
      width: 70px;
      height: 70px;
      left: -100px;
      top: 0;
      border-radius: 50%;
      transition: all 4s;
}
@keyframes fly {
      to { left: 40%; bottom: 10%; }
}

/* 闪光字 */
.gaog {
        font-family: '微软雅黑';
        font-weight: 960;
        font-size: 3rem;
        text-align: center;
        color: transparent;
        background-color: #ff66cc;
        background-clip: text;
        -webkit-background-clip: text;
        position: relative;
}
.gaog::after {
    content: attr(data-text);
    position: absolute;
    left: 108px;
    top: 108px;
    left: 1px;
    top: -2px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem,
rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255,
0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 150% 100%;
    background-repeat: no-repeat;
    animation: shine1 5s infinite linear;
}
@keyframes shine1 {
        0% { background-position: 50% 0; }
        100% { background-position: -190% 0; }
}

</style>
<div id="papa">
       <video class="shipin" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6dda0115f.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>

    <div style="position: absolute; left:260px; top: 10px; width:460px;height: 90px; opacity: .95;">
              <p class="gaog" data-text="有请消暑活动主持群闪亮登场">有请消暑活动主持群闪亮登场</p></div>

       <div style="position: absolute; left:10px; bottom: 10px; width:300px;opacity: .25;">
                <img alt="" src="https://pic.imgdb.cn/item/62c78fb4f54cd3f93783b4d5.gif"/></div>
       <div style="position: absolute; left:360px; bottom: 10px; width:300px;opacity: .25;">
                <img alt="" src="https://pic.imgdb.cn/item/62c78fb4f54cd3f93783b4d5.gif"/></div>
       <div style="position: absolute; left:710px; bottom: 10px; width:300px;opacity: .25;">
                <img alt="" src="https://pic.imgdb.cn/item/62c78fb4f54cd3f93783b4d5.gif"/></div>
      <div style="position: absolute; right:-10px; top: 0px; width:480px;opacity: .95;">
                <img alt="" src="https://pic.imgdb.cn/item/62c7cc37f54cd3f937cff9f6.gif"/></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1923948539.mp3" autoplay="autoplay" loop="loop"></audio>
    </div><br><br><br><br><br><br>

<script>

let picAr = [
    'https://www.huachaowang.com/uc_server/data/avatar/000/00/00/03_avatar_middle.jpg',
    'https://www.huachaowang.com/uc_server/data/avatar/000/00/70/84_avatar_middle.jpg',
    'https://www.huachaowang.com/uc_server/data/avatar/000/00/42/75_avatar_middle.jpg',
    'https://www.huachaowang.com/uc_server/data/avatar/000/00/65/75_avatar_middle.jpg',
    'https://www.huachaowang.com/uc_server/data/avatar/000/00/67/66_avatar_middle.jpg',
    'https://www.huachaowang.com/uc_server/data/avatar/000/00/71/87_avatar_middle.jpg',
    'https://www.huachaowang.com/uc_server/data/avatar/000/00/71/30_avatar_middle.jpg',
    'https://www.huachaowang.com/uc_server/data/avatar/000/00/00/27_avatar_middle.jpg',
    'https://www.huachaowang.com/uc_server/data/avatar/000/00/63/64_avatar_middle.jpg',
    'https://www.huachaowang.com/uc_server/data/avatar/000/00/00/02_avatar_middle.jpg'
];
let pNum = picAr.length, last;//pNum : 小块总数 last : 上一个出场

let gNum = (x, y) => Math.floor(Math.random() * (y-x+1)) + x; //取两数间整数随机数

Array.from({length:pNum}).forEach((item,key) => {
      item = document.createElement('img');
      item.className = 'piece';
       item.src = picAr;
      item.alt = '';
      papa.appendChild(item);
});

setTimeout(in_out, 600);

function in_out() {
      let pieces = document.querySelectorAll('.piece');
      let key = gNum(0, pieces.length - 1);
      if(key == last) key = last + 1; //避免重合
      if(key > pieces.length - 1) key = 0;
      if(last >= 0) pieces.style.cssText = 'transform: translate(0,0) rotate(0) scale(1); opacity: 0';
      pieces.style.cssText = 'transform: translate(556px, 230px) rotate(1turn) scale(2.5); opacity: 1';
      last = key;
      setTimeout(in_out, 6000);
}

</script>

红影 发表于 2022-7-8 16:49

消暑活动马上开始了，主持群先集体亮个相。也让学习的代码直接派上用途。
这个是随机出来的呢，所以代码里的头像排列顺序没什么用啊{:4_173:}

红影 发表于 2022-7-8 16:50

@樵歌@绿叶清舟@小辣椒@大猫咪

红影 发表于 2022-7-8 16:51

@小九@加林森@马黑黑@友昕@辫子哥哥

红影 发表于 2022-7-8 16:53

所有的主持都登场了，虽然活动下周才正式开始，咱们这一桌可以先喝起来了{:4_189:}

加林森 发表于 2022-7-8 17:27

来亮个像

梦油 发表于 2022-7-8 17:54

三伏盛夏为大家服务，你们辛苦了！

            {:4_180:}

马黑黑 发表于 2022-7-8 18:20

都闪亮登场了哈{:4_187:}

小九 发表于 2022-7-8 18:24

报到报到！ 好气派的出场仪式啊{:4_187:}

绿叶清舟 发表于 2022-7-8 20:18

滚出来的啊{:4_189:}

四海八荒 发表于 2022-7-8 21:10

红影 发表于 2022-7-8 16:53
所有的主持都登场了，虽然活动下周才正式开始，咱们这一桌可以先喝起来了

先上红的，再上白的。{:4_189:}先把辫子灌醉

友昕 发表于 2022-7-8 21:11

红影好手艺！{:5_116:}

四海八荒 发表于 2022-7-8 21:11

绿叶清舟 发表于 2022-7-8 20:18
滚出来的啊

还好不是连滚带爬{:4_173:}

四海八荒 发表于 2022-7-8 21:11

小九 发表于 2022-7-8 18:24
报到报到！ 好气派的出场仪式啊

灯光不错

绿叶清舟 发表于 2022-7-8 21:21

四海八荒 发表于 2022-7-8 21:11
还好不是连滚带爬

咱功夫好嘛{:4_189:}

加林森 发表于 2022-7-8 21:35

再来欣赏！

红影 发表于 2022-7-8 21:41

加林森 发表于 2022-7-8 17:27
来亮个像

欢迎加加主持{:4_187:}

红影 发表于 2022-7-8 21:42

梦油 发表于 2022-7-8 17:54
三伏盛夏为大家服务，你们辛苦了！

樵歌弄的一个活动，从头伏第一天开始玩起，一直玩到三伏结束{:4_173:}

红影 发表于 2022-7-8 21:43

马黑黑 发表于 2022-7-8 18:20
都闪亮登场了哈

觉得黑黑的这个代码正好可以用来让主持人出场{:4_173:}

红影 发表于 2022-7-8 21:44

小九 发表于 2022-7-8 18:24
报到报到！ 好气派的出场仪式啊

刚学会这个，否则上次活动就可以弄了{:4_189:}
页: [1] 2 3 4 5
查看完整版本: 三伏消暑活动主持群入场（学习黑黑图片出场模式）