论坛 › 祝福礼堂 › 热烈祝贺庶民、马黑黑、梦油升任版主、超版

红影 发表于 2024-1-11 09:44

热烈祝贺庶民、马黑黑、梦油升任版主、超版

<style>
#papa {
        margin: 80px 0 0 calc(50% - 593px);
        width:1024px;
        height: 640px;
        border: 1px solid gray;
        background: url('https://pic.imgdb.cn/item/659f3817871b83018a7b0677.jpg') no-repeat center/cover;
        box-shadow: 3px 6px 12px #000;
        z-index: 1;
        position: relative;
        display: grid;
        place-items: center;
        overflow: hidden;
}
#papa::before, #papa::after {
      position: absolute;
      content: '';
      left: 47%;top: 50%;
      width: 130px;
      height: 130px;
      background: url('https://pic.imgdb.cn/item/659e5c87871b83018a123dea.gif') no-repeat center/cover;
      clip-path:polygon(50% 0,65% 40%, 100% 40%,72% 60%,85% 100%,50% 75%,15% 100%,28% 60%,0 40%,35% 40%);
      opacity: 1;
      animation: move 2s linear infinite alternate var(--state);
      --xx: 19%;
}
#papa::after {
         background: url('https://pic.imgdb.cn/item/659e5d87871b83018a15d982.gif') no-repeat center/cover;
      --xx: 75%;
}
@keyframes move {
      to { left: var(--xx); }
}

@keyframes move1 {
         to { transform: translate(0, -260px); }
}
@keyframes flash { from { opacity: 1; transform: rotate(-5deg); } to { opacity: 0.7; transform: rotate(5deg); } }
#mypic { position: absolute; width: 130px;left: 47%;top: 50%; opacity: 1;clip-path:polygon(50% 0,65% 40%, 100% 40%,72% 60%,85% 100%,50% 75%,15% 100%,28% 60%,0 40%,35% 40%); animation: move1 2s linear infinite alternate var(--state);z-index: 10; }


.tietu { position: absolute; width: 280px;left: 360px;top:180px; opacity: .95; z-index: 10; }
.tietu1 { position: absolute; width: 391px; height: 277px;left: -60px;bottom: -10px; opacity: .95; z-index: 10; }
.tietu2 { position: absolute;   left: 780px;top:0px; transform: rotate(80deg);animation: flash 1sinfinite alternate var(--state);z-index: 10; }
#papa video { position: absolute; width: 100%; height: 700px; top: -60px; opacity: .35; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 10;}
</style>
<div id="papa"><img id="mypic" src="https://pic.imgdb.cn/item/659e5d6a871b83018a156c48.gif" alt="" />
<img class="tietu1" src="https://pic.imgdb.cn/item/659ec134871b83018a0d971f.gif" alt="" />
<img class="tietu" src="https://pic.imgdb.cn/item/659e5965871b83018a0699fd.gif" alt="" />
<img class="tietu2" src="https://pic.imgdb.cn/item/6423aa0ba682492fccf083f0.png" alt="" />
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/64/5e5940fc4d4a6_10s_big.mp4" autoplay loop muted></video>
</div>

<script>
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
        var player = new ypP();
        player.setAudSrc('https://music.163.com/song/media/outer/url?id=2074686238');
        player.setBtnCss(`
                width: 300px;
                bottom: 10px;
                z-index: 10;
                opacity: 1;
                --btnBg: url('https://pic.imgdb.cn/item/659f3988871b83018a7fd22e.png') no-repeat center/cover;
                --trackBg: transparent;
                --progBg: orange;
                --btnSize: 50px;
        `);
        player.setLrcCss('top: 15px; color: tan; --bg: OrangeRed; z-index: 9;');
        player.lrcAr = [ , ];
};
</script>

红影 发表于 2024-1-11 09:46

用学习作业做个小帖，热烈祝贺三位荣升{:4_187:}

红影 发表于 2024-1-11 09:51

黑黑的代码里是2个动态效果，本来想用nth-of-type()的方式变成3个呢，结果昨天没弄成。
然后又回到原来的作业代码，另加个移动的图图，也解决了。
想剪切成菱形的，后来想想五角星应该更好看，就用了五角星。

梦油 发表于 2024-1-11 09:52

本帖最后由 梦油 于 2024-1-11 09:53 编辑

整个画面处处都在动，动感十足，给人感觉灵动、隽永。谢谢影子朋友！{:4_180:}

红影 发表于 2024-1-11 09:53

祝贺祝贺再祝贺，花潮的管理工作有你们的加持，一定会更完善。花潮有你们的辛苦付出一定会越来越美好{:4_177:}

红影 发表于 2024-1-11 10:23

梦油 发表于 2024-1-11 09:52
整个画面处处都在动，动感十足，给人感觉灵动、隽永。谢谢影子朋友！

这必须是很欢乐的事啊，就弄了点欢乐的动图{:4_173:}

驻在平安夜前夕 发表于 2024-1-11 10:28

实至名归
贺一下

庶民 发表于 2024-1-11 10:33

庶民当斑猪，对照镜子哭，
肩上担子重，心里直突突。

世事一盘棋，人生一本书，
棋局怎样下，花潮怎样读。

实话向大家，心里没有谱，
今后日子里，期待您帮助！

醉美水芙蓉 发表于 2024-1-11 11:26

世外桃源 发表于 2024-1-11 11:40

红影 发表于 2024-1-11 09:51
黑黑的代码里是2个动态效果，本来想用nth-of-type()的方式变成3个呢，结果昨天没弄成。
然后又回到原来的 ...

美女真能干{:4_178:}

世外桃源 发表于 2024-1-11 11:43

欢乐的场面真热闹{:4_199:}

世外桃源 发表于 2024-1-11 11:43

热烈祝贺庶民、马黑黑、梦油升任版主、超版{:4_187:}

世外桃源 发表于 2024-1-11 11:44

梦油 发表于 2024-1-11 09:52
整个画面处处都在动，动感十足，给人感觉灵动、隽永。谢谢影子朋友！

祝贺梦油先生{:4_187:}

世外桃源 发表于 2024-1-11 11:45

庶民 发表于 2024-1-11 10:33
庶民当斑猪，对照镜子哭，
肩上担子重，心里直突突。



祝贺庶民{:4_199:}

不客气了，发现庶民也是很有才的

小九 发表于 2024-1-11 12:16

祝贺三位版主！{:4_187:}{:4_428:}

亦是金 发表于 2024-1-11 13:09

好看！祝贺庶民、马黑黑、梦油升任版主、超版{:4_199:}{:4_178:}

庶民 发表于 2024-1-11 14:47

世外桃源 发表于 2024-1-11 11:45
祝贺庶民

不客气了，发现庶民也是很有才的

哈哈，不关我的事。

庶民 发表于 2024-1-11 14:48

亦是金 发表于 2024-1-11 13:09
好看！祝贺庶民、马黑黑、梦油升任版主、超版

感谢鼓励

庶民 发表于 2024-1-11 14:48

世外桃源 发表于 2024-1-11 11:43
热烈祝贺庶民、马黑黑、梦油升任版主、超版

当官不易呀。

樵歌 发表于 2024-1-11 16:08

整得好热闹。高高兴兴庆祝三位荣升！{:4_431:}{:4_431:}{:4_431:}

查看完整版本: 热烈祝贺庶民、马黑黑、梦油升任版主、超版