宁静 发表于 2024-1-1 10:37

祝大家元旦快乐！


<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 10:37

祝东篱论坛的朋友们元旦快乐！

宁静 发表于 2024-1-1 10:38

手机欣赏手动播放，点击中间小美女

伤痕泪泪 发表于 2024-1-1 11:15

元旦快乐！

乐活 发表于 2024-1-1 11:54

新年快乐！事事顺意！

撒哈拉的雨 发表于 2024-1-1 14:31

祝东篱论坛的朋友们元旦快乐！

撒哈拉的雨 发表于 2024-1-1 14:34

祝宁静元旦快乐，开心幸福，永远健康！

墨羽 发表于 2024-1-1 20:46

精心制作的，很漂亮很好看，同祝宁静元旦快乐!{:10_403:}{:10_403:}{:10_403:}

瞳萤 发表于 2024-1-1 21:10

很漂亮的播放器，元旦快乐~

非常开心 发表于 2024-1-3 08:05

欣赏老师的精美制作
页: [1] 2
查看完整版本: 祝大家元旦快乐！