红影 发表于 2023-3-6 10:00

贺走过岁月生辰（3.6）

<style>
#papa {
        --state: paused; --deg: 1turn;
        margin: 80px 0 0 calc(50% - 681px);
        display: grid;
        place-items: center;
        width: 1200px;
        height: 675px;
       
        box-shadow: 6px 3px 20px #000;
        user-select: none;
        position: relative;
        z-index: 1;
}
#btnFs {
      position: absolute;
      bottom: 20px;
      width: fit-content;
      height: fit-content;
      padding: 6px;
      border-radius: 6px;
      border: 2px solid DeepPink;
      color: DeepPink;
      text-shadow: 1px 1px 1px #000;
      display: none;
      cursor: pointer;
}
#mplayer {
        margin: 200px auto;
        background: red;
        box-shadow: -10px -10px 30px black inset;
        border-radius: 50%;
      top:20%; left:39%;
        width: 60px;
        height: 60px;
        cursor: pointer;
        animation: rot linear 3s infinite var(--state);
        position: absolute;
}
#mplayer::before, #mplayer::after {
      position: absolute;
      content: '';
      width: 40px;
      height: 40px;
      top: 50px;
      box-shadow:
                100px 100px 30px red,
                -100px 100px 30px navy,
                100px -100px 30px orange,
                -100px -100px 30px olive;
      animation: rot linear 3s infinite var(--state);
}
#mplayer::after { --deg: -2turn; top: -50px; }
.wenzi { position: absolute; left:80px; bottom: 20px; color: red; font: bold 16px/20px 'FangSong',serif; opacity: .45; }
@keyframes rot { to { transform: rotate(var(--deg)); } }
.vid { position: absolute; width: 100%; height: 100%;object-fit: cover; opacity: 1; }
#pic {
      position: absolute;
      left: 20px;
      top: 30px;
      width: 480px;
      height: 150px;
      opacity: 0.8;
}
#pic1 {
      position: absolute;
      left: 8%;
      top: 63%;
      width: 101px;
      height: 200px;
      opacity: 0.8;
}
#tit {
      position: absolute;
      right: 240px;
      top: 10px;
      background-image:url('https://pic.imgdb.cn/item/64048d06f144a01007b4f608.gif'); background-size:cover;
      width:600px; 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">
<video class="vid" src="https://video-js.51miz.com/preview/video/00/00/13/83/V-138398-6EE8DC77.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div id="tit">TO 走过岁月</div>
<img id="pic" src="https://pic.imgdb.cn/item/6404888cf144a01007ac0a2e.gif" alt="" />
<img id="pic1" src="https://pic.imgdb.cn/item/6404944ff144a01007bfd975.gif" alt="" />
        <div id="mplayer"></div>
        <div id="btnFs">全屏观赏</div>
<div class="wenzi">2023年3月6日 红影</div>
        <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/12/26/6910d7ac8062235864ca93a47af7bb17.mp3" autoplay loop></audio>
</div>

<script>
(function() {
        let fs = false, timerId;

        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
        aud.addEventListener('play', () => mState());
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('ended', () => playNext());
      papa.addEventListener('mousemove', (e) => {
                clearTimeout(timerId);
                btnFs.style.display = 'block';
                timerId = setTimeout('btnFs.style.display = "none"', 3000);
      });
      btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
      document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
})();
</script>

红影 发表于 2023-3-6 10:03

一份小礼送给岁月，今天是你的生日，祝福生日快乐，所有美好的心愿都能实现@走过岁月{:4_187:}

红影 发表于 2023-3-6 10:05

感谢黑黑的代码，送礼的同时，学习一下代码。谢谢黑黑{:4_204:}

梦油 发表于 2023-3-6 10:34

借影子美帖祝福岁月生日快乐！

小辣椒 发表于 2023-3-6 13:29

亲爱的，你背景加了视频吧，我手机的

走过岁月 发表于 2023-3-6 13:29

红影 发表于 2023-3-6 10:03
一份小礼送给岁月，今天是你的生日，祝福生日快乐，所有美好的心愿都能实现@走过岁月

来了

小辣椒 发表于 2023-3-6 13:30

黑黑的小点点效果真漂亮{:4_199:}
同祝岁月生日快乐！

走过岁月 发表于 2023-3-6 13:30

哇，亲手写的生日快乐很给力

走过岁月 发表于 2023-3-6 13:31

谢谢影子的祝福，好开心！

走过岁月 发表于 2023-3-6 13:31

梦油 发表于 2023-3-6 10:34
借影子美帖祝福岁月生日快乐！

谢谢梦油的祝福

晓哥 发表于 2023-3-6 13:37

制作的温馨耐看，欣赏，同祝岁月生日快乐！

庶民 发表于 2023-3-6 14:09

祝福走过岁月，天天快乐

梦油 发表于 2023-3-6 14:32

走过岁月 发表于 2023-3-6 13:31
谢谢梦油的祝福

别客气。

红影 发表于 2023-3-6 19:20

梦油 发表于 2023-3-6 10:34
借影子美帖祝福岁月生日快乐！

跟梦油一起祝福{:4_187:}

红影 发表于 2023-3-6 19:21

小辣椒 发表于 2023-3-6 13:29
亲爱的，你背景加了视频吧，我手机的

是的，觉得有视频更烘托气氛{:4_173:}

红影 发表于 2023-3-6 19:22

走过岁月 发表于 2023-3-6 13:30
哇，亲手写的生日快乐很给力

没岁月的帖子漂亮，也是份心意。生日快乐{:5_166:}{:4_187:}

红影 发表于 2023-3-6 19:23

走过岁月 发表于 2023-3-6 13:31
谢谢影子的祝福，好开心！

开心就多喝几杯生日酒{:4_191:}

红影 发表于 2023-3-6 19:24

晓哥 发表于 2023-3-6 13:37
制作的温馨耐看，欣赏，同祝岁月生日快乐！

谢谢晓哥鼓励，一起祝福岁月{:4_187:}

红影 发表于 2023-3-6 19:24

庶民 发表于 2023-3-6 14:09
祝福走过岁月，天天快乐

跟庶民一起祝福{:4_187:}

梦油 发表于 2023-3-6 20:27

走过岁月 发表于 2023-3-6 13:31
谢谢梦油的祝福

别客气。
页: [1] 2
查看完整版本: 贺走过岁月生辰（3.6）