小辣椒 发表于 2024-3-16 14:18

辛辛苦苦为了啥

<style>
#papa { margin: 150px 0 0 calc(50% - 831px); width: 1500px; height: 804px; box-shadow: 3px 3px 20px #000; background: url(' https://xlaj.cn/assets/file/zp/20240316132450.gif') no-repeat center/cover; position: relative; display: grid; place-items: center; overflow: hidden; z-index: 1; }
#vid { position: absolute;left: 150px; top: -100px; width: 120%; height: 110%; object-fit: cover; mix-blend-mode: color-dodge; opacity: .55; }

#tit {
      position: absolute;   
      top: 10px;
      background-image:url('https://xlaj.cn/assets/file/zp/20240118150805.gif '); background-size:cover;
      width:350px; height:200px; left: 40px; font: bold 2.0em 微软雅黑; serif;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
      solid; z-index: 10;
}
#tit2 {
      position: absolute;   
      top: 60px;
      background-image:url('https://xlaj.cn/assets/file/zp/20240118150805.gif'); background-size:cover;
      width:350px; height:120px; left: 70px; font: bold 1.6emserif;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
      border:0px #FF4A20 solid; z-index: 10;
}

</style>

<div id="papa">

<div id="tit">辛辛苦苦为了啥</div>

<div id="tit2">同一首</div>
      <video id="vid" src="https://txcdn-data.mvbox.cn/live/vp/02/ef3063ab9373073ae4699d9bc884a49f.mp4" loop muted></video>
      
</div>

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

sf.onload = () => {
      let player = new ypP();
      player.setAudSrc('https://s138.ananas.chaoxing.com/sv-w8/audio/08/3d/d7/9dca531a8ac9702ccde3506dfe52b8f4/audio.mp3');
      player.setBtnCss(`
                width: 300px;
                left: 45%;
                bottom: 50px;
                --btnBg: url('https://638183.freep.cn/638183/web/svg/sunfl-2.svg') no-repeat center/cover;
                --trackBg: transparent;
                --progBg: rgba(34,139,34,.7);
                --btnSize: 50px;
      `);
      player.setLrcCss('top: 75%;left: 45%;color: rgba(143,188,143,.9); --bg: rgba(34,139,34,.65); font-size: 1.8em;');
      player.lrcAr = [,
                ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
};
</script>
<br><br><br><br><br>

bgmnet 发表于 2024-3-16 16:57

真的不错，，，音乐好听，，漂亮，，有折腾不少时间吧，，

小辣椒 发表于 2024-3-16 17:05

bgmnet 发表于 2024-3-16 16:57
真的不错，，，音乐好听，，漂亮，，有折腾不少时间吧，，

被这个粒子光感效果搞晕了，微风可以出来，花潮这个背景效果不能出来，郁闷，同样的代码

無名 发表于 2024-3-16 18:00

好听，感谢分享。

liumang 发表于 2024-3-19 00:39

小辣椒同一首{:5_150:}

liumang 发表于 2024-3-19 00:42

不错，背景出来的效果漂亮，像沙子飞舞

小辣椒 发表于 2024-3-20 22:18

liumang 发表于 2024-3-19 00:42
不错，背景出来的效果漂亮，像沙子飞舞

liumang晚上好，去看看我刚发的频谱有没有出来

liumang 发表于 2024-3-21 22:44

小辣椒 发表于 2024-3-20 22:18
liumang晚上好，去看看我刚发的频谱有没有出来

完好，频谱很漂亮的
页: [1]
查看完整版本: 辛辛苦苦为了啥