亦是金 发表于 2024-1-15 20:45

《 相 思 帕 》 - 崔伟立/孙艺琪（试帖黑黑老师图片配色同步歌词代码3）

<div style="width: 1200px;height: 700px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:100px;margin-LEFT: -110px;">

<style>
#papa {
      margin: ; width: 1200px; height: 700px;top:-80px; LEFT: 0px;background: url('https://z4a.net/images/2023/10/31/1918.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; }


       #plane1{position: absolute;left:50px;top: 220px;width: 100px; height: 100px; offset-distance: 0;offset-path: path("M0 480 Q500 480, 550 480 T1600 480");animation: move 28s linear infinite;}
       #plane {position: absolute;left: 760px;top: 200;width: 0px;offset-distance: 0;offset-path: path("M0 40 Q500 180, 600 160 T0 40");animation: move 0s linear infinite;}
       #plane2 {position: absolute;left: 490px;top: 390;width: 0px;offset-distance: 0;offset-path: path("M0 40 Q500 180, 600 160 T0 40");animation: move 0s linear infinite;}

#vid1 {
    position: absolute;
    width: 100%;
    height: 100%;
    left:0%;
    bottom:0%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
    opacity: .2;
}
#vid2 {
    position: absolute;
    width: 65%;
    height: 65%;
    top:40%;
    left:54%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 3;
    opacity: .25;
}
</style>

<div style="position: relative; width: 500px; height: 50px; top:650px;LEFT: 1000px;z-index: 100; filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:24px;">亦是金在线音乐</span></span></span></p></div>

<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: -20px;LEFT: -340px;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:32px;">《 相 思 帕 》   </span>
<span style="color:#3d46f7;"><span style="font-size:22px;">    - 崔伟立/孙艺琪</span></div>

</style>

<div id="papa">

          <img id="plane1" src="https://z4a.net/images/2023/10/31/100hei.jpg" alt="" />
          <img id="plane" src="" alt="" />
          <img id="plane2" src="http://www.bohann.net/static/image/smiley/taoxiaoxian/85.gif" alt="" />


<video id="vid1" src="https://imgs-qn.51miz.com/preview/video/00/00/15/62/V-156223-564A0B99.mp4" autoplay="" loop="" muted=""></video>
<video id="vid2" src="https://imgs-qn.51miz.com/preview/element/00/01/25/42/E-1254242-A0EC8832.mp4" autoplay="" loop="" muted=""></video>

        <audio id="aud" src="http://chuangshicdn.data.mvbox.cn/music/fc/21/04/15/21041501114039463154.mp3" autoplay loop></audio>
</div>

<script>

(function() {
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      let rippleJs = 'https://638183.freep.cn/638183/web/svg/ripple-min.js',
                js1 = 'https://ysj147.s3-us-east-1.ossfiles.com/zzsc/js/svg_path_lrcysj.js',
                js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_02.js';
        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(rippleJs, () => rippleEffect(papa));

        loadJs(js1, () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: lrcAr,
                        lrc_css: (`bottom:5%; right: 40%; color: rgba(255,255,255,.9); --bg: url('https://z4a.net/images/2024/01/15/20240115a.jpg'); font-size: 2.4em;`),
                        fs_css: 'transform: translate(0,-135px); background: transparent;',
                        player_css: 'width: 250px; height: 650px;top: 37%; left: 85%; transform: perspective(800px) rotatez(-50deg)',
                        path: 'm119.15969,165.05097c-2.21499,1.71473 -5.82226,1.71473 -8.06889,0l-34.45891,-26.46248c-9.9991,-7.69312 -9.42953,-20.43774 1.77199,-27.52839c9.74595,-6.18694 24.26996,-5.07468 33.1932,1.78425l3.54398,2.71113l3.51234,-2.68796c8.92324,-6.8821 23.44725,-7.99436 33.1932,-1.80742c11.16988,7.09065 11.77109,19.83527 1.77199,27.52839l-34.45891,26.46248zm-91.76386,17.98151c3.73384,-2.47941 9.5561,-2.3172 13.47979,0l29.23786,17.12414c3.57563,2.10866 8.03725,3.24409 12.65708,3.24409l37.43332,0c2.78456,0 5.06283,-1.66839 5.06283,-3.70753s-2.27828,-3.70753 -5.06283,-3.70753l-24.77624,0c-5.03119,0 -9.71431,-2.52575 -10.53702,-6.16376c-1.04421,-4.63441 3.82877,-8.66635 9.9991,-8.66635l50.62833,0c8.54353,0 16.80228,2.155 23.44725,6.09425l14.71386,8.73586l17.53006,0c2.78456,0 5.06283,1.66839 5.06283,3.70753l0,22.24516c0,2.03914 -2.27828,3.70753 -5.06283,3.70753l-112.90119,0c-4.58819,0 -9.04981,-1.13543 -12.65708,-3.24409l-47.84378,-28.03818c-4.80969,-2.80382 -5.1894,-8.17973 -0.41136,-11.33113z',
                        btn: {left: 34, top: 20},
                        track: {track: '#f4fd05', prog: '#fb0925'},
                        img: {play: 'https://pic.imgdb.cn/item/65212a5ac458853aef566925.png', pause: 'https://pic.imgdb.cn/item/65212a6bc458853aef566b8e.png'}
                });
        });

        loadJs(js2, () => {
                H5lz({
                        papa: '#papa',
                        total: 5,
                        size: {width: 50, height: 50},
                        shape: {background: 'url("http://www.bohann.net/static/image/smiley/taoxiaoxian/85.gif") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toRight',/*ani: 'toLeft'*/
                        maxTime: 20,
                        offset: {x: 20, y: 0},
                });
        });
})();

</script>

小辣椒 发表于 2024-1-15 23:06

前辈现在速度的，又一个路径播放器加图片歌词，效果棒棒的{:5_150:}

liumang 发表于 2024-1-15 23:17

亦是金老师好制作，画面温馨的{:5_149:}

liumang 发表于 2024-1-15 23:18

感谢分享{:5_150:}{:5_150:}{:5_150:}

亦是金 发表于 2024-1-17 21:45

小辣椒 发表于 2024-1-15 23:06
前辈现在速度的，又一个路径播放器加图片歌词，效果棒棒的

问好小辣椒！谢谢欣赏点赞！{:5_116:}

亦是金 发表于 2024-1-17 21:46

liumang 发表于 2024-1-15 23:17
亦是金老师好制作，画面温馨的

问好liumang管理！{:5_116:}

亦是金 发表于 2024-1-17 21:46

liumang 发表于 2024-1-15 23:18
感谢分享

谢谢欣赏！{:5_116:}

小辣椒 发表于 2024-2-5 20:44

亦是金 发表于 2024-1-17 21:45
问好小辣椒！谢谢欣赏点赞！

前辈客气了

亦是金 发表于 2024-2-6 16:48

小辣椒 发表于 2024-2-5 20:44
前辈客气了

问好小辣椒！{:5_116:}

bgmnet 发表于 2024-2-7 22:08

试贴。。。。。？
不是正式贴吗？
页: [1] 2
查看完整版本: 《 相 思 帕 》 - 崔伟立/孙艺琪（试帖黑黑老师图片配色同步歌词代码3）