论坛 › 祝福礼堂 › 仙凡之旅 贺清舟芳辰

红影 发表于 2023-2-19 23:11

仙凡之旅 贺清舟芳辰

<style>
#papa {
      margin: 80px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 576px;
      background: darkblue url('https://pic.imgdb.cn/item/63f17a4ef144a010071798d5.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      z-index: 1; overflow: hidden;
}
#papa::before {
      content: '';
      position: absolute;
      width: 496px;
      height: 138px;
      background: url('https://pic.imgdb.cn/item/624f9886239250f7c55c810d.gif') no-repeat center/cover;
      left:10px; top: 0px;opacity: .95;
}
#mplayer {
      --angle1: 0;
      --angle2: 360deg;
      --state: paused;
      left: calc(50% - 50px);
      top: calc(50% - 40px);
      position: absolute;
      width: 140px;
      height: 140px;
      display: grid;
      place-items: center;
      cursor: pointer; z-index: 10;      
}
#yuan1 {
      --angle1: 0;
      --angle2: 360deg;
      position: absolute;
      width: 140px;
      height: 140px;
      background: url('https://pic.imgdb.cn/item/63f1839ef144a0100724c357.png') no-repeat center/cover;         animation: rot 4s linear infinite;
      animation-play-state: var(--state);
}
#yuan2 {
      --angle1: 360deg;
      --angle2: 0;
      position: absolute;
      width: 219px;
      height: 219px;
      background: url('https://pic.imgdb.cn/item/63f183daf144a01007250c71.png') no-repeat center/cover;         animation: rot 6s linear infinite;
      animation-play-state: var(--state);
}
#yuan3 {
      --angle1: 0;
      --angle2: 360deg;
      position: absolute;
      width: 298px;
      height: 298px;
      background: url('https://pic.imgdb.cn/item/63f183faf144a010072534a2.png') no-repeat center/cover;
      animation: rot 6s linear infinite ;
      animation-play-state: var(--state);
}
@keyframes rot {
      0% { transform: rotate(var(--angle1)); }
      100% { transform: rotate(var(--angle2)); }
}
#tit {
      position: absolute;
      right: -32px;
      top: -40px;
      background-image:url('https://pic.imgdb.cn/item/63f23e3af144a0100753e43c.gif'); background-size:cover;
      width:600px; height:200px; font: bold 2.8em sans-serif;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
      border:0px #FF4A20 solid; z-index: 10;
}
.vid { position: absolute; width: 1200px; height: 725px; top: 45px; left:0px; object-fit: cover; opacity: .45; mix-blend-mode: screen; }
.wenzi { position: absolute; right:56px; bottom: 20px; color: red; font: bold 16px/20px 'FangSong',serif; opacity: .45; }
</style>
<div id="papa">
      <div id="mplayer"><div id="yuan1"></div><div id="yuan2"></div><div id="yuan3"></div></div><div id="tit">仙凡之旅-贺清舟芳辰</div>
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/23/5b52e6295a4ca.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div style="position: absolute; right:395px; bottom: 172px; width:190px; transform: scale(0.7); z-index: 10;">
                <img alt="" src="https://pic.imgdb.cn/item/63f22ef1f144a010073aaf4c.gif"/>            
      </div>
<div class="wenzi">2023年2月 红影恭贺</div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=86381.mp3" loop autoplay></audio>
</div>

<script>
(function() {
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

})();
</script>

红影 发表于 2023-2-19 23:13

@绿叶清舟生日快乐。送个仙境给你，祝福你每一天有幸福飘逸的心情{:4_187:}

红影 发表于 2023-2-19 23:17

明后天可能有事要忙。看到悄然的祝福，赶紧跟上。这个又是看得晕晕的帖子。清舟要绑在蛋糕桌上才能切蛋糕了。来个酒不醉人人自醉也好，晕乎乎的日子更自在{:4_173:}

四海八荒 发表于 2023-2-20 07:50

清舟生日快乐{:4_176:}

梦油 发表于 2023-2-20 09:57

借红影美帖祝福清舟生日快乐！

梦缘 发表于 2023-2-20 10:54

仙境之旅，祝清舟老师生日快乐！{:4_176:}

小辣椒 发表于 2023-2-20 21:11

亲爱的，这么美的效果出来了{:4_178:}

小辣椒 发表于 2023-2-20 21:12

昨天就发了啊，才看见

音乐很震撼，有气势的{:4_178:}

小辣椒 发表于 2023-2-20 21:13

清舟生日快乐~~@绿叶清舟

小辣椒 发表于 2023-2-20 21:14

亲爱的，速度真快，我鱼儿的贺帖还没有做，清舟也是一起过生日了，借帖祝福2美女生日快乐

千羽 发表于 2023-2-20 21:23

很想去仙境游玩，好美啊{:4_173:}

千羽 发表于 2023-2-20 21:23

和影儿同祝清舟生日快乐{:4_187:}

红影 发表于 2023-2-20 22:57

四海八荒 发表于 2023-2-20 07:50
清舟生日快乐

跟四海一起祝贺清舟{:4_187:}

红影 发表于 2023-2-20 22:58

梦油 发表于 2023-2-20 09:57
借红影美帖祝福清舟生日快乐！

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

红影 发表于 2023-2-20 22:58

梦缘 发表于 2023-2-20 10:54
仙境之旅，祝清舟老师生日快乐！

谢谢梦缘，我们一起祝福{:4_187:}

红影 发表于 2023-2-20 22:59

小辣椒 发表于 2023-2-20 21:11
亲爱的，这么美的效果出来了

套用黑黑代码加点效果而已{:4_173:}

红影 发表于 2023-2-20 23:00

小辣椒 发表于 2023-2-20 21:12
昨天就发了啊，才看见

音乐很震撼，有气势的

昨天发得晚了，发完我也跑下去休息了{:4_173:}

红影 发表于 2023-2-20 23:00

小辣椒 发表于 2023-2-20 21:14
亲爱的，速度真快，我鱼儿的贺帖还没有做，清舟也是一起过生日了，借帖祝福2美女生日快乐

哪里，昨天为了弄帖子，结果一大堆提醒都没来得及回复。我做帖实际很慢的{:4_173:}

红影 发表于 2023-2-20 23:01

千羽 发表于 2023-2-20 21:23
很想去仙境游玩，好美啊

好啊，借清舟的生日，咱们一起跑进去玩玩{:4_179:}

绿叶清舟 发表于 2023-2-21 12:56

红影 发表于 2023-2-19 23:17
明后天可能有事要忙。看到悄然的祝福，赶紧跟上。这个又是看得晕晕的帖子。清舟要绑在蛋糕桌上才能切蛋糕了 ...

谢谢影{:4_179:}，这么漂亮的贴，俺和蛋糕绑在一起{:4_189:}

查看完整版本: 仙凡之旅 贺清舟芳辰