小辣椒 发表于 2023-12-30 16:27

纯音欣赏 我所爱的人 （学习黑黑的一起祝新年快乐！）

<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/20231230134905.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.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://xlaj.cn/assets/file/zp/20231230161411.mp3" 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>

小辣椒 发表于 2023-12-30 16:29

@马黑黑

黑黑套用一个完成作业，懒人纯套用的{:4_170:}

顺祝黑黑新年快乐，新的一年心想事成，幸福永远！

小辣椒 发表于 2023-12-30 16:31

@走过岁月

感谢岁月，你来了，小辣椒又可以玩你的AE效果了，{:4_205:}

岁月新年快乐！永远20岁的{:4_170:}

红影 发表于 2023-12-30 16:41

这画面好喜庆啊，欣赏亲爱的好帖，也祝亲爱的新年快乐，万事如意{:4_177:}

梦油 发表于 2023-12-30 17:34

谢谢小辣椒朋友的美好祝福。祝花潮论坛繁荣兴旺，祝小辣椒朋友健康快乐！

起个网名好难 发表于 2023-12-30 19:17

预祝2024元旦快乐！

樵歌 发表于 2023-12-30 19:52

借你贴祝你新年快乐！大眼睛越来越明亮，好看{:4_179:}

醉美水芙蓉 发表于 2023-12-30 20:05

亦是金 发表于 2023-12-31 10:06

问好小辣椒！祝新年快乐，万事如意！{:4_187:}

马黑黑 发表于 2023-12-31 10:32

小辣椒 发表于 2023-12-30 16:29
@马黑黑

黑黑套用一个完成作业，懒人纯套用的


非常感谢！也祝你和家人来年一切顺意！

小辣椒 发表于 2023-12-31 13:40

红影 发表于 2023-12-30 16:41
这画面好喜庆啊，欣赏亲爱的好帖，也祝亲爱的新年快乐，万事如意

亲爱的新年快乐！明天就是新年，时间过太快了，一杂眼又一年过去了

小辣椒 发表于 2023-12-31 13:41

梦油 发表于 2023-12-30 17:34
谢谢小辣椒朋友的美好祝福。祝花潮论坛繁荣兴旺，祝小辣椒朋友健康快乐！

谢谢梦油，你太温馨了{:4_187:}

也是祝梦油新年快乐，万事如意！

小辣椒 发表于 2023-12-31 13:42

起个网名好难 发表于 2023-12-30 19:17
预祝2024元旦快乐！

谢谢难难，也是祝难难新年快乐，万事如意！

小辣椒 发表于 2023-12-31 13:43

樵歌 发表于 2023-12-30 19:52
借你贴祝你新年快乐！大眼睛越来越明亮，好看

谢谢樵哥哥，借你的吉言，真这样我会开心S的{:4_170:}

小辣椒 发表于 2023-12-31 13:44

醉美水芙蓉 发表于 2023-12-30 20:05
欣赏小辣椒精美音画！祝元旦快乐！

谢谢水芙蓉，也祝你新年快乐，万事如意！

小辣椒 发表于 2023-12-31 13:45

亦是金 发表于 2023-12-31 10:06
问好小辣椒！祝新年快乐，万事如意！

谢谢前辈，也祝你新年快乐，万事如意！

小辣椒 发表于 2023-12-31 13:45

马黑黑 发表于 2023-12-31 10:32
非常感谢！也祝你和家人来年一切顺意！

谢谢黑黑，祝福来年都能顺顺利利！

愤怒的葡萄 发表于 2023-12-31 14:23

也祝坛友们元旦快乐！~~~

梦油 发表于 2023-12-31 15:08

小辣椒 发表于 2023-12-31 13:41
谢谢梦油，你太温馨了

也是祝梦油新年快乐，万事如意！

祝小辣椒朋友新年快乐、万事如意！

杨柳青 发表于 2023-12-31 22:50

小辣椒西哪儿去啦~~几年没见哈~~{:4_189:}
页: [1] 2
查看完整版本: 纯音欣赏 我所爱的人 （学习黑黑的一起祝新年快乐！）