小辣椒 发表于 2023-12-24 21:23

《听山岚》TO：走过岁月 （学习黑黑花间辞效果）


<style>
#papa {
      margin: 140px 0 0 calc(50% - 681px);
      display: grid;
      place-items: center;
      width: 1200px;
      height: 650px;
      background: url('https://xlaj.cn/assets/file/zp/20231224211305.jpg');
      overflow: hidden;
      position: relative;
}
video {
      position: absolute;
      top: -100px;
      width: 1200px;
      height: 750px;
      object-fit: cover;
      opacity: .98;
}
#dt1{ position: absolute; width: 50px; height: 70px; top: 250px; left: 250px;opacity: 1; z-index: 3; }
#dt2{ position: absolute; width: 55px; height: 55px; top: 320px; left: 128px; opacity: 1; z-index: 3; }
</style>

<div id="papa">

<img id="dt1" src="https://wj.zp68.com/lxx/yunhua/2023/11/bu/02/hd.gif" alt="" />
<img id="dt2" src="https://wj.zp68.com/lxx/yunhua/2023/11/bu/02/mf.gif" alt="" />

      <video src="https://zgsy-1254134120.cos.ap-guangzhou.myqcloud.com/tsl.mp4" autoplay loop muted></video>
</div>

<script>
const sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/mplayer.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
      const myplayer = new mPlayer();
      myplayer.setAudSrc('https://xlaj.cn/assets/file/zp/20231224211239.mp3');
      myplayer.setBtnCss(`
                background: url('https://xlaj.cn/assets/file/zp/20231224211154.png') no-repeat center/cover;width: 200px;height: 200px;bottom: 50%;“
      `);
       myplayer.setLrcCss(' top: 40px; left:100px;font:normal 1.6em 微软雅黑;color: Gray; --bg: LightGrey;');
       myplayer.lrcAr = [ ,
        ,
         ,
         ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
      ,
      ,
      ,
        ,
        ,       
      ,
           ]
};
</script>

小辣椒 发表于 2023-12-24 21:24

@走过岁月 谢谢岁月的视频制作，我做了背景衬托，非常喜欢的一首纯音，百听不厌{:4_187:}

小辣椒 发表于 2023-12-24 21:26

@马黑黑
谢谢黑黑的源码分享，我这里背景底图用了纯黑的，想万一没有底图，手机会直接看不见视频。点击转盘视频出来了

马黑黑 发表于 2023-12-24 21:29

美美哒
{:4_199:}

走过岁月 发表于 2023-12-24 21:30

来了，好久没看到小辣椒做帖了

走过岁月 发表于 2023-12-24 21:31

美女按钮不错

走过岁月 发表于 2023-12-24 21:31

小辣椒就是创意多

走过岁月 发表于 2023-12-24 21:31

做得很美，赞一下

走过岁月 发表于 2023-12-24 21:31

谢谢小辣椒的礼物，开心

红影 发表于 2023-12-24 21:34

这个制作漂亮。美女按钮和视频里的美女一脉相承，还加了两个漂亮的小动图。亲爱的做得真快{:4_199:}
欣赏亲爱的好帖，岁月收礼开心{:4_187:}

千羽 发表于 2023-12-24 21:42

小辣椒发图了，挺美的{:4_187:}

千羽 发表于 2023-12-24 21:44

好创意好制作，两个小动图好可爱，播放器也很别致{:4_187:}

千羽 发表于 2023-12-24 21:45

音乐好喜欢，动态效果也好漂亮{:4_187:}

千羽 发表于 2023-12-24 21:46

问好岁月，收礼开心{:4_187:}

千羽 发表于 2023-12-24 21:47

小辣椒棒棒哒，做帖辛苦了{:4_187:}

亦是金 发表于 2023-12-25 10:50

问好小辣椒！帖子做的真美！{:4_187:}

马黑黑 发表于 2023-12-25 12:42

{:4_208:}

冬天的雨 发表于 2023-12-28 23:31

小辣椒 发表于 2023-12-24 21:24
@走过岁月 谢谢岁月的视频制作，我做了背景衬托，非常喜欢的一首纯音，百听不厌

纯音好听{:4_208:}

冬天的雨 发表于 2023-12-28 23:31

走过岁月 发表于 2023-12-24 21:31
谢谢小辣椒的礼物，开心

岁月收礼开心{:4_187:}

走过岁月 发表于 2023-12-29 13:07

冬天的雨 发表于 2023-12-28 23:31
岁月收礼开心

谢谢冬雨兄，好开心
页: [1] 2 3
查看完整版本: 《听山岚》TO：走过岁月 （学习黑黑花间辞效果）