醉美水芙蓉 发表于 2023-10-24 22:32

择一人爱一生

本帖最后由 醉美水芙蓉 于 2023-10-24 22:32 编辑 <br /><br /><style>
#papa {
      margin: ; width: 1197px; height: 686px;top:-80px; LEFT: -300px;background: url('https://shuifurong.s3-us-east-1.ossfiles.com/TUPING/%E9%82%A3%E8%BE%B9.gif') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
</style>
<style type="text/css">

@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
      margin: auto;
      width: 800px;
      text-align: center;
      font-family:微软简中圆;
      font-size: 2.5rem;
      font-weight: bold;
      color: #f46ff6;
      transform-origin: top;
      animation: yao 1.0s linear infinite alternate;
}

@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}



.tit { position: relative;width: 300px;height: 30px;top: -10px;LEFT: -400px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/

</style>

<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:30px;">《择一人爱一生》 </span>
<span style="color:#3d46f7;"><span style="font-size:22px;">   - 陈瑞</span></div>

</style>



<div id="papa">
        <audio id="aud" src="https://www.qqmc.com/mp3/music294511740.mp3" autoplay loop></audio>
</div>

<script>
(function() {
        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();
        };

      let rippleJs = 'https://638183.freep.cn/638183/web/svg/ripple-min.js',
                js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
                js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_02.js';

let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        loadJs(rippleJs, () => rippleEffect(papa));

        loadJs(js1, () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: lrcAr,
                        lrc_css: 'bottom: 20px; --bg: linear-gradient(rgba(255,140,240,.35),rgba(250,90,220,.7)); color: #eee;',
                        fs_css: 'transform: translate(0,-35px); background: transparent;top: 75%',
                        player_css: 'width: 576px; height:512px;top: 75%; left: 75%; ',
                        path: 'm150.07895,4l-97.15792,0c-1.10407,0 -2.15293,0.59382 -2.76017,1.60331l-27.60168,43.70506c-0.80045,1.3064 -0.71764,3.02848 0.19321,4.21611l76.18064,101.18672c1.32488,1.75177 3.80903,1.75177 5.13391,0l76.18064,-101.18672c0.91086,-1.21733 0.99366,-2.90971 0.19321,-4.21611l-27.57408,-43.70506c-0.63484,-1.00949 -1.6561,-1.60331 -2.78777,-1.60331zm-5.32712,14.25165l17.47186,28.5033l-18.87955,0l-14.27007,-28.5033l15.67775,0zm-55.783,0l25.03472,0l14.27007,28.5033l-53.54726,0l14.24247,-28.5033zm-30.72067,0l15.67775,0l-14.27007,28.5033l-18.87955,0l17.47186,-28.5033zm-11.86872,42.75495l14.18726,0l18.85195,47.5055l-33.03921,-47.5055zm28.40213,0l53.43685,0l-26.71843,72.23805l-26.71843,-72.23805zm48.79977,47.5055l18.82435,-47.5055l14.18726,0l-33.01161,47.5055z',
                        btn: {left: 34, top: 20},
                        track: {track: 'blue', prog: '#fc78e8'},
                        img: {play: 'https://pic.imgdb.cn/item/65212a5ac458853aef566925.png', pause: 'https://pic.imgdb.cn/item/65212a6bc458853aef566b8e.png'}
                });
        });

        loadJs(js2, () => {
                H5lz({
                        papa: '#papa',
                        total: 7,
                        size: {width: 30, height: 30},
                        shape: {background: 'url("https://www.huachaowang.com/static/image/smiley/hcbiaoqing2/105.gif") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toBottom',
                        maxTime: 30,
                        offset: {x: -100, y: 0},
                });
        });
})();

</script>

冬天的雨 发表于 2023-10-24 23:06

欣赏美女的漂亮制作{:4_187:}

红影 发表于 2023-10-24 23:09

水芙蓉美女的制作漂亮，这个播放器路径特别漂亮。给水芙蓉美女点赞{:4_199:}

红影 发表于 2023-10-24 23:13

歌词同步和那个动态效果重叠了，而且貌似这个动态效果比较快，加水波纹效果感觉有点乱呢。{:4_204:}

亦是金 发表于 2023-10-24 23:46

欣赏水芙蓉美帖！漂亮的钻石路径！{:4_187:}

醉美水芙蓉 发表于 2023-10-25 07:00

冬天的雨 发表于 2023-10-24 23:06
欣赏美女的漂亮制作

谢谢冬雨老师光临！

醉美水芙蓉 发表于 2023-10-25 07:01

红影 发表于 2023-10-24 23:13
歌词同步和那个动态效果重叠了，而且貌似这个动态效果比较快，加水波纹效果感觉有点乱呢。

谢谢红影美女点评！

醉美水芙蓉 发表于 2023-10-25 07:01

亦是金 发表于 2023-10-24 23:46
欣赏水芙蓉美帖！漂亮的钻石路径！

谢谢老师支持和鼓励！

红影 发表于 2023-10-25 11:04

醉美水芙蓉 发表于 2023-10-25 07:01
谢谢红影美女点评！

问好水芙蓉美女，上午好{:4_187:}
页: [1]
查看完整版本: 择一人爱一生