论坛 › 祝福礼堂 › 《有生之年》贺杨柳青生日（11.27）

红影 发表于 2023-11-26 14:05

《有生之年》贺杨柳青生日（11.27）

<style>
#papa {
      margin: 80px 0 0 calc(50% - 645px);
      display: grid;
      place-items: center;
      width: 1128px;
      height: 640px;
      background: lightblue;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      z-index: 1;
      --state: running;
}
#vid { position: absolute; width: 100%; height: 100%;object-fit: cover; pointer-events: none;z-index: -1; opacity: 0.95; }
.play_pic {
      position: absolute;
      width: 439px;
      height: 340px;
      right: 200px; top: 90px;
      opacity: .75;
      cursor: pointer;
      animation: rot 2s infinite alternate var(--state);
}
.pic {
      position: absolute;
      width: 130px;
      height: 26px;
      right: 80px; top: 320px;
      opacity: .75;
      animation: rot1 0.8s infinite alternate var(--state);
}
#tit {
      position: absolute;
      left: -180px;
      top: 240px;
      background-image:url('https://pic.imgdb.cn/item/6562c38dc458853aef9d7d27.gif'); background-size:cover;
      width:700px; height:260px; font: bold 3.8em serif;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
      border:0px #FF4A20 solid; z-index: 10;
}
@keyframes rot1 { from { transform: translateX(10px); } to { transform: translateX(-10px); } }
@keyframes rot { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
</style>

<div id="papa">
<video id="vid" src="https://video-js.51miz.com/preview/video/00/00/15/21/V-152188-F16AEBB8.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2085445198" autoplay loop></audio>
      <img class="play_pic" src="https://pic.imgdb.cn/item/6562bc7bc458853aef897805.gif" alt="" />
      <img class="pic" src="https://pic.imgdb.cn/item/6562c064c458853aef948bfb.png" alt="" />
<div id="tit">TO 杨柳青</div>
</div>

<script>

let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       

];

let loadJs = (url,callback) => {
      let body = document.querySelector('body'), jsNode = document.createElement('script');
      jsNode.charset = 'utf-8';
      jsNode.setAttribute('src', url);
      body.appendChild(jsNode);
      jsNode.onload = () => callback();
};

loadJs('https://638183.freep.cn/638183/web/api/hc_lrc.js', () => {
      HCPlayer({
                papa: '#papa',
                lrcAr: lrcAr,
                lrc_css: 'top: 40px; left:400px; color: Linen;--bg: linear-gradient(rgba(246,189,76,.25),rgba(240,128,10,.9));',
      });
});
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

红影 发表于 2023-11-26 14:10

学习一下黑黑的《檐下客》代码，为了分别控制两个图图，没使用:nth-of-type(n)选择器{:4_173:}
谢谢@马黑黑 的代码{:4_187:}

红影 发表于 2023-11-26 14:11

@杨柳青 明天是你的生日，做个学习帖子当礼物送你。祝福生日快乐，万事如意{:5_166:}{:4_187:}

梦油 发表于 2023-11-26 16:23

借影子朋友美帖祝福杨柳青生日快乐！

醉美水芙蓉 发表于 2023-11-26 16:49

樵歌 发表于 2023-11-26 17:01

借美贴祝贺杨柳青生日快乐！{:4_204:}

亦是金 发表于 2023-11-26 19:37

借花献佛，{:4_204:}祝福杨柳青生日快乐！

红影 发表于 2023-11-26 19:40

梦油 发表于 2023-11-26 16:23
借影子朋友美帖祝福杨柳青生日快乐！

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

红影 发表于 2023-11-26 19:40

醉美水芙蓉 发表于 2023-11-26 16:49
欣赏红影佳作！

谢谢水芙蓉美女鼓励{:4_187:}

红影 发表于 2023-11-26 19:40

樵歌 发表于 2023-11-26 17:01
借美贴祝贺杨柳青生日快乐！

跟师兄一起祝福杨柳青{:4_187:}

红影 发表于 2023-11-26 19:42

亦是金 发表于 2023-11-26 19:37
借花献佛，祝福杨柳青生日快乐！

跟亦是金老师一起祝福{:4_187:}

千羽 发表于 2023-11-26 19:49

漂亮的暖色调，温馨的祝福画面。那个金手指太有创意了{:4_173:}{:4_187:}

千羽 发表于 2023-11-26 19:51

和影儿一起贺杨柳青生日，祝生日快乐幸福永远{:4_187:}

千羽 发表于 2023-11-26 19:52

问好 影儿，周末开心，新周快乐{:4_185:}

马黑黑 发表于 2023-11-26 20:00

红影 发表于 2023-11-26 14:10
学习一下黑黑的《檐下客》代码，为了分别控制两个图图，没使用:nth-of-type(n)选择器
谢谢@马黑 ...

:nth-of-type 设置并不影响插件的运行

小文 发表于 2023-11-26 20:28

来晚了，请恩师携小文一起吃蛋糕！当然，祝福寿星：生日快乐！

红影 发表于 2023-11-26 20:32

千羽 发表于 2023-11-26 19:49
漂亮的暖色调，温馨的祝福画面。那个金手指太有创意了

怕别人不知道那是暂停按钮{:4_189:}

红影 发表于 2023-11-26 20:33

千羽 发表于 2023-11-26 19:51
和影儿一起贺杨柳青生日，祝生日快乐幸福永远

和于耳一起祝福他{:4_187:}

红影 发表于 2023-11-26 20:34

千羽 发表于 2023-11-26 19:52
问好 影儿，周末开心，新周快乐

谢谢羽儿，也祝你快乐{:4_179:}

红影 发表于 2023-11-26 20:35

马黑黑 发表于 2023-11-26 20:00
:nth-of-type 设置并不影响插件的运行

知道的，因为需要两个图图有不同的动作，所以分开设置了，就没使用:nth-of-type{:4_173:}

查看完整版本: 《有生之年》贺杨柳青生日（11.27）