小辣椒 发表于 2024-1-1 10:09

黑黑 红影 元旦快乐！


<style>
#papa {
      margin: 120px 0 0 calc(50% - 721px);
      position: relative;
      display: grid;
      place-items: center;
      width: 1280px;
      height: 846px;
      box-shadow: 3px 3px 20px #000;
      z-index: 1;
      overflow: hidden;
}
.bgpic {
      position: absolute;
      width: 640px;
      height:423px;
      left: 0;
      top: 0;
      content: url('https://xlaj.cn/assets/file/zp/20240101002559.gif');
}
.bgpic:nth-of-type(2) {
      top: 423px;
      transform: rotateX(180deg);
}
.bgpic:nth-of-type(3) {
      left: 640px;
      transform: rotateY(180deg);
}
.bgpic:nth-of-type(4) {
      left: 640px;
      top: 423px;
      transform: rotateX(180deg) rotateY(180deg);
}
#btnplay {
      cursor: pointer;
      z-index: 1;
      animation: rotating 5s infinite linear var(--state);
}
#vid {
      position: absolute;
      right: -162px;
      width: 1442px;
      height: 846px;
      mix-blend-mode: screen;
      object-fit: cover;
      pointer-events: none;
}
@keyframes rotating {
      to { transform: rotate(1turn); }
}

#tit {
      position: absolute;
      right: 240px;
      top: 10px;
      background-image:url('https://xlaj.cn/assets/file/zp/20231230134933.gif '); background-size:cover;
      width:800px; height:200px; font: bold 3.2em serif;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
      border:0px #FF4A20 solid; z-index: 10;
}

</style>

<div id="papa">
      <div class="bgpic"></div>
      <div class="bgpic"></div>
      <div class="bgpic"></div>
      <div class="bgpic"></div>
      <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/59/07/63806a6eb7241.mp4" autoplay loop muted></video>
      <audio id="aud" src=" https://aod.cos.tx.xmcdn.com/storages/1221-audiofreehighqps/F2/DC/GKwRIDoJYRHfACAAAAKSvUmP.m4a" autoplay loop></audio>

<div id="tit">黑黑 红影元旦快乐</div>

      <img id="btnplay" src="https://xlaj.cn/assets/file/zp/20240101002737.gif " alt="" title="播放/暂停" />
</div>

<script>

(function() {

let mState = () => {
      aud.paused ?
                (papa.style.setProperty('--state','paused'), vid.pause()) :
                (papa.style.setProperty('--state','running'), vid.play());
};

aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);

btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();

})();

</script>

小辣椒 发表于 2024-1-1 10:11

新的一年开始了，回顾去年一年，花潮论坛就你们二位最辛苦，小辣椒开年第一天就真挚的送上祝福，祝二位新年快乐！元旦快乐！新的一年你们又要辛苦了{:4_204:}{:4_204:}

小辣椒 发表于 2024-1-1 10:13

最简单的制作，但是最真诚的祝福，祝福来年花潮论坛更加红红火火{:4_205:}

小辣椒 发表于 2024-1-1 10:15

同时也祝花潮论坛的同学们来年在黑黑老师和红影领导的带领下学习更上一层楼，代码玩的溜溜的{:4_172:}{:4_205:}

小辣椒 发表于 2024-1-1 10:17

@马黑黑 @红影

{:4_204:}{:4_204:}

梦油 发表于 2024-1-1 10:20

新年快乐！万事如意！

小辣椒 发表于 2024-1-1 10:23

梦油 发表于 2024-1-1 10:20
新年快乐！万事如意！

也是要感谢梦油，你是坚守阵地的好版主{:4_187:}

红影 发表于 2024-1-1 10:31

感谢亲爱的美好祝福，这个还是黑黑的最新效果呢。亲爱的聪明{:4_187:}

红影 发表于 2024-1-1 10:31

也祝亲爱的新年快乐，身体安康，幸福永远{:4_179:}

小辣椒 发表于 2024-1-1 10:41

红影 发表于 2024-1-1 10:31
感谢亲爱的美好祝福，这个还是黑黑的最新效果呢。亲爱的聪明

亲爱的，元旦快乐！新年快乐！{:4_179:}

小辣椒 发表于 2024-1-1 10:42

红影 发表于 2024-1-1 10:31
也祝亲爱的新年快乐，身体安康，幸福永远

谢谢亲爱的，辛苦了一年了，来个大大的{:4_179:}

红影 发表于 2024-1-1 10:50

小辣椒 发表于 2024-1-1 10:41
亲爱的，元旦快乐！新年快乐！

新年第一天收到好礼，太开心了{:4_183:}

红影 发表于 2024-1-1 10:50

小辣椒 发表于 2024-1-1 10:42
谢谢亲爱的，辛苦了一年了，来个大大的

也不辛苦啊，应该是玩了一年才是{:4_173:}

马黑黑 发表于 2024-1-1 11:54

非常感谢。欣赏小辣椒的美帖，如饮甘霖。也祝小辣椒身体健康工作顺心生活如意！

马黑黑 发表于 2024-1-1 12:01

小辣椒 发表于 2024-1-1 10:13
最简单的制作，但是最真诚的祝福，祝福来年花潮论坛更加红红火火

{:4_199:}{:4_180:}

醉美水芙蓉 发表于 2024-1-1 12:23

冬天的雨 发表于 2024-1-1 13:41

小辣椒 发表于 2024-1-1 10:11
新的一年开始了，回顾去年一年，花潮论坛就你们二位最辛苦，小辣椒开年第一天就真挚的送上祝福，祝二位新年 ...

同贺同贺{:4_205:}

冬天的雨 发表于 2024-1-1 13:44

小辣椒元旦快乐，新的一年健康快乐！{:4_197:}{:4_185:}

冬天的雨 发表于 2024-1-1 13:44

这个好像不错好玩的，冬雨去套一个

冬天的雨 发表于 2024-1-1 13:46

二位大侠收礼开心{:4_172:}
页: [1] 2
查看完整版本: 黑黑 红影 元旦快乐！