红影 发表于 2023-3-29 23:05

生日快乐 TO 小九贺芳辰（4.1）

<style>
#papa {
      --state: running; --delay: 0s;
      margin: 80px 0 0 calc(50% - 681px);
      width: 1200px;
      height: 675px;      
      box-shadow: 3px 3px 20px #000;
      position: relative;
      display: grid;
      place-items: center;
      z-index: 1;
}
#papa::before, #papa::after {
         position: absolute; left: 110px; top:0px;
         content: url('https://pic.imgdb.cn/item/6423aa0ba682492fccf083f0.png'); z-index: 10;
         animation: flash 1.5s var(--delay) infinite alternate var(--state);
}
#papa::after { left: 940px; --delay: .8s; }
#clock {
      position: absolute;
      left: 610px;
      top: 500px;
      width: 140px;
      height: 140px;
      background: tan;
      box-shadow: 0 0 40px 20px hsla(302,20%,20%,.9) inset, 0 0 80px 40px hsla(40,100%,50%,.5) inset;
      filter: drop-shadow(-5px -5px 30px black);
      border-radius: 50%;
      border: 6px solid hsla(40,75%,40%,.6);
      display: grid;
      place-items: center;
      cursor: pointer; z-index: 10;
      opacity: .8;
      --state: paused;
}
#clock::before, #clock::after {
      position: absolute;
      content: '';
      width: 5px;
      height: 68px;
      background: hsla(40,100%,60%,.45);
}
#clock::before {
      --deg: 15deg; --time: .4s;
      top: 50%;
      background: hsla(40,100%,60%,.95);
      transform-origin: 50% 0;
      transform: rotate(-15deg);
      animation: rot var(--time) infinite alternate linear var(--state);
}
#clock::after {
      --deg: 360deg;
      bottom: 50%;
      transform-origin: 50% 100%;
      transform: rotate(0deg);
      animation: rot var(--time) infinite linear var(--state);
}
#clock > span {
      position: absolute;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: hsla(50,100%,50%,.9);
      z-index: 10;
}
#clock > span:nth-of-type(2) {
      top: -6px;
      width: 6px;
      height: 6px;
}
.mypic {
      position: absolute;
      left: 400px;top: 10px;      
}
.mypic1 {
      position: absolute;
       left: 460px; top: 320px;
}
.wenzi { position: absolute; right:80px; bottom: 20px; color: Orange; font: bold 16px/20px 'FangSong',serif; opacity: .55;z-index: 2;}
.vid { position: absolute; width: 100%; height: 100%;object-fit: cover; opacity: 1; }
#tit {
      position: absolute;
      right: 180px;
      top: 150px;
      background-image:url('https://pic.imgdb.cn/item/64048d06f144a01007b4f608.gif'); background-size:cover;
      width:700px; height:260px; font: bold 4.8em serif;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
      border:0px #FF4A20 solid; z-index: 10;
}
@keyframes rot { to {transform: rotate(var(--deg)); } }
@keyframes flash { from { opacity: 1; transform: rotate(-5deg); } to { opacity: 0.5; transform: rotate(5deg); } }
</style>

<div id="papa">
      <div id="clock">00:00   00:00<span></span><span></span></div>
<video class="vid" src="https://video-js.51miz.com/preview/video/00/00/16/42/V-164266-FABCA39A.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
       <img class="mypic" src="https://pic.imgdb.cn/item/6423aba4a682492fccf29761.png" alt="" />
       <img class="mypic1" src="https://pic.imgdb.cn/item/6423abc8a682492fccf2c773.gif" alt="" />
       <div id="tit">TO 小九</div>
       <div class="wenzi">2023年4月1日 红影敬贺</div>   
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=520461814" autoplay loop></audio>
</div>

<script>
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
aud.addEventListener('play', () => clock.style.setProperty('--state', 'running'));
aud.addEventListener('pause', () => clock.style.setProperty('--state','paused'));
clock.addEventListener('click', () => aud.paused ? (aud.play(), clock.style.setProperty('--state','running')) : (aud.pause(), clock.style.setProperty('--state','paused')));
aud.addEventListener('timeupdate', () => clock.innerHTML = toMin(aud.currentTime) + '　   ' +toMin(aud.duration) + '<span></span><span></span>');
aud.addEventListener('canplay', () => clock.style.setProperty('--time', aud.duration + 's'));
</script>

红影 发表于 2023-3-29 23:07

九儿周六的生日，因为周末有事了，可能无法上来，先送上生日祝福，祝九儿生日快乐@小九{:4_187:}

红影 发表于 2023-3-29 23:08

学习黑黑的时钟效果和两颗星星的闪烁效果，谢谢黑黑的代码{:4_187:}

马黑黑 发表于 2023-3-29 23:48

很豪华的样纸

马黑黑 发表于 2023-3-29 23:49

@小九 生日快乐

庶民 发表于 2023-3-30 05:00

祝福生日，开心。

梦油 发表于 2023-3-30 10:13

影子朋友这个贺贴做得真好，可惜，俺没分了。
俺就借影子朋友的美帖，祝福小九生日快乐、青春永驻。

红影 发表于 2023-3-30 12:22

马黑黑 发表于 2023-3-29 23:48
很豪华的样纸

提前给九儿备好了蛋糕{:4_173:}

红影 发表于 2023-3-30 12:22

庶民 发表于 2023-3-30 05:00
祝福生日，开心。

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

红影 发表于 2023-3-30 12:23

梦油 发表于 2023-3-30 10:13
影子朋友这个贺贴做得真好，可惜，俺没分了。
俺就借影子朋友的美帖，祝福小九生日快乐、青春永驻。

不用评分呢，一起送上祝福才是最好的。跟梦油一起祝福{:4_187:}

马黑黑 发表于 2023-3-30 12:38

红影 发表于 2023-3-30 12:22
提前给九儿备好了蛋糕

太提前了时间没到蛋糕就吃完了

梦油 发表于 2023-3-30 13:21

红影 发表于 2023-3-30 12:23
不用评分呢，一起送上祝福才是最好的。跟梦油一起祝福

好啊，影子朋友。咱们一起分享小九的欢乐。

红影 发表于 2023-3-30 16:43

马黑黑 发表于 2023-3-30 12:38
太提前了时间没到蛋糕就吃完了

不准先吃啊，要等到生日蜡烛吹完才行的啊{:4_173:}

红影 发表于 2023-3-30 16:44

梦油 发表于 2023-3-30 13:21
好啊，影子朋友。咱们一起分享小九的欢乐。

是呢，美丽的人间四月天，九儿生在第一天呢{:4_173:}

马黑黑 发表于 2023-3-30 17:40

红影 发表于 2023-3-30 16:43
不准先吃啊，要等到生日蜡烛吹完才行的啊

反正会有人忍不住

梦油 发表于 2023-3-30 17:47

红影 发表于 2023-3-30 16:44
是呢，美丽的人间四月天，九儿生在第一天呢

哦，4月1日啊。

绿叶清舟 发表于 2023-3-30 19:33

九真会挑日子的，制作漂亮同祝九生日快乐

小辣椒 发表于 2023-3-30 20:30

亲爱的~~~热闹的有节日的气氛呢

小辣椒 发表于 2023-3-30 20:31

运用了黑黑好几个效果，制作美美的{:4_199:}

小辣椒 发表于 2023-3-30 20:32

借美帖同贺小九生日快乐！@小九
页: [1] 2 3
查看完整版本: 生日快乐 TO 小九贺芳辰（4.1）