小辣椒 发表于 2024-1-1 14:53

祝元旦快乐！（同一首The Calling）

<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/20240101095824.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://pic.imgdb.cn/item/64048d06f144a01007b4f608.gif'); background-size:cover;
      width:800px; height:200px; font: bold 3.8em 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/20231230134828.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>
<br><br><br><br>

小辣椒 发表于 2024-1-1 14:55

祝朋友们元旦快乐！新年快乐！

三月的阳光 发表于 2024-1-1 19:43

师傅，元旦快乐~~{:5_128:}{:5_128:}

liumang 发表于 2024-1-2 21:50

同一首{:5_150:}

亦是金 发表于 2024-1-3 12:54

问好小辣椒！新年快乐！{:5_116:}
页: [1]
查看完整版本: 祝元旦快乐！（同一首The Calling）