论坛 › 音乐沙龙 › 朋友们元旦快乐！

冬天的雨 发表于 2024-1-1 14:28

朋友们元旦快乐！

<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://pic.imgdb.cn/item/65919906c458853aef5a7ca0.jpg');
}
.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.6em 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/8596-audiofreehighqps/BB/7F/GKwRIDoIVPIFAEj1TwImMWUL.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>
<br><br><br><br>

冬天的雨 发表于 2024-1-1 14:29

今天元旦了。祝论坛的朋友们元旦快乐！新年快乐！

冬天的雨 发表于 2024-1-1 14:29

@小辣椒   圆球是你的

{:4_170:}{:4_189:}{:4_196:}{:4_205:}{:4_172:}

冬天的雨 发表于 2024-1-1 14:30

冬雨意学习做一个{:4_205:}

亦是金 发表于 2024-1-1 14:45

冬雨制作特快！厉害了！冬雨元旦快乐！{:4_190:}{:4_205:}

醉美水芙蓉 发表于 2024-1-1 15:39

千羽 发表于 2024-1-1 17:37

冬小雨的图带来了喜庆欢乐的节日氛围，大家一起跳起来{:4_173:}

千羽 发表于 2024-1-1 17:38

冬天的雨 发表于 2024-1-1 14:29
今天元旦了。祝论坛的朋友们元旦快乐！新年快乐！

祝冬小雨元旦快乐，平安吉祥{:4_187:}

梦油 发表于 2024-1-1 17:48

打油朋友新年快乐！

樵歌 发表于 2024-1-1 18:20

漂亮热烈喜庆。祝福小冬雨元旦快乐！

红影 发表于 2024-1-1 18:43

好热烈的祝福帖子。谢谢冬小雨的美好祝福，也祝你元旦快乐{:4_177:}

世外桃源 发表于 2024-1-1 21:41

欣赏欣赏

世外桃源 发表于 2024-1-1 21:42

喜庆的场面{:4_199:}

世外桃源 发表于 2024-1-1 21:42

祝元旦快乐

侃大山 发表于 2024-1-2 09:02

很喜庆。元旦快乐{:4_204:}

侃大山 发表于 2024-1-2 09:03

制作漂亮，学习{:4_204:}

冬天的雨 发表于 2024-1-2 11:05

亦是金 发表于 2024-1-1 14:45
冬雨制作特快！厉害了！冬雨元旦快乐！

谢谢亦是金老老师，你是大咖的{:4_187:}

冬天的雨 发表于 2024-1-2 11:06

醉美水芙蓉 发表于 2024-1-1 15:39
冬雨老师很厉害！做得漂亮！

谢谢美女

冬天的雨 发表于 2024-1-2 11:06

千羽 发表于 2024-1-1 17:37
冬小雨的图带来了喜庆欢乐的节日氛围，大家一起跳起来

冬雨邀请小千羽来一个{:4_170:}

冬天的雨 发表于 2024-1-2 11:06

千羽 发表于 2024-1-1 17:38
祝冬小雨元旦快乐，平安吉祥

谢谢小千羽

查看完整版本: 朋友们元旦快乐！