亦是金 发表于 2023-11-3 09:45

《向 阳 花》 - 安与骑兵（尝鲜黑黑老师代码）

本帖最后由 亦是金 于 2023-11-3 11:11 编辑 <br /><br /><meta charset="UTF-8">
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1969237">

<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: -310px;">

<style>
#papa {
      margin: ; width: 1200px; height: 700px;top:-80px; LEFT: 0px;background: url('https://z4a.net/images/2023/11/03/7668.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: 180px;width: 100px; height: 100px; offset-distance: 0;offset-path: path("M0 480 Q500 480, 550 480 T1600 480");animation: move 28s 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:38%;
    left:52%;
    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: -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">

<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>

<img id="plane1" src="https://z4a.net/images/2023/10/31/100hei.jpg" alt="" />
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27571488.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: 20px; --bg: linear-gradient(rgba(255,140,240,.35),rgba(250,90,220,.7)); color: #eee;',
                        fs_css: 'transform: translate(0,-35px); background: transparent;',
                        player_css: 'width: 250px; height: 650px;top: 42%; left: 75%;',
                        path: 'm203.38113,188.99999l-173.43407,-13.69902l168.16207,40.67637l-157.78119,-66.41791l142.61183,90.14535l-123.10836,-111.13299l99.85916,128.73925l-73.57491,-142.43302l45.05954,151.80409l-15.17519,-156.56326l-15.17519,156.56326l45.05954,-151.80409l-73.57491,142.43302l99.85916,-128.73925l-123.10836,111.13299l142.61183,-90.14535l-157.78119,66.41791l168.16207,-40.67637l-173.43407,13.69902l173.43407,13.69902l-168.16207,-40.67637l157.78119,66.41791l-142.61183,-90.14535l123.10836,111.13299l-99.85916,-128.73925l73.57491,142.43302l-45.05954,-151.80409l15.17519,156.56326l15.17519,-156.56326l-45.05954,151.80409l73.57491,-142.43302l-99.85916,128.73925l123.10836,-111.13299l-142.61183,90.14535l157.78119,-66.41791l-168.16207,40.67637l173.43407,-13.69902z',
                        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("https://www.huachaowang.com/static/image/smiley/hcbiaoqing3/242.gif") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toLeft',
                        maxTime: 20,
                        offset: {x: 0, y: 0},
                });
        });
})();

</script>
</td></tr></table>

梦油 发表于 2023-11-3 10:37

分享了。

红影 发表于 2023-11-3 10:42

这个有意思，把那个复杂的图案做成路径了啊，背后还衬了个动图，非常漂亮的制作{:4_199:}

红影 发表于 2023-11-3 10:44

又是论坛表情做例子小图呢，漂亮。底图动态也漂亮，只是左下角带logo不太好{:4_173:}

红影 发表于 2023-11-3 10:45

这样的路径只有熟悉路径的形成方法，才能调整到想要的进度，这个对调进度也有点要求的呢{:4_173:}

亦是金 发表于 2023-11-3 10:53

本帖最后由 亦是金 于 2023-11-3 10:57 编辑

红影 发表于 2023-11-3 10:44
又是论坛表情做例子小图呢，漂亮。底图动态也漂亮，只是左下角带logo不太好
这个好办！用一张图片挡一挡！就OK

亦是金 发表于 2023-11-3 10:54

梦油 发表于 2023-11-3 10:37
分享了。

问好梦油朋友！{:4_190:}

亦是金 发表于 2023-11-3 10:55

红影 发表于 2023-11-3 10:42
这个有意思，把那个复杂的图案做成路径了啊，背后还衬了个动图，非常漂亮的制作

问好红影！{:4_187:}

亦是金 发表于 2023-11-3 10:56

红影 发表于 2023-11-3 10:45
这样的路径只有熟悉路径的形成方法，才能调整到想要的进度，这个对调进度也有点要求的呢

这个不难，小菜一碟！{:4_189:}

亦是金 发表于 2023-11-3 11:12

红影 发表于 2023-11-3 10:44
又是论坛表情做例子小图呢，漂亮。底图动态也漂亮，只是左下角带logo不太好

修改了！

马黑黑 发表于 2023-11-3 11:51

赞！

虽然作为播放进度调整它不太合适，但非常漂亮！

醉美水芙蓉 发表于 2023-11-3 11:53

亦是金 发表于 2023-11-3 12:36

马黑黑 发表于 2023-11-3 11:51
赞！

虽然作为播放进度调整它不太合适，但非常漂亮！

谢谢老师的代码！谢谢老师点赞！{:4_190:}

亦是金 发表于 2023-11-3 12:39

醉美水芙蓉 发表于 2023-11-3 11:53
这个路径这么复杂，老师都做出来了，厉害！

问好水芙蓉！{:4_187:}我只是搬运了黑黑老师的代码！应该说马黑黑老师厉害！{:4_195:}

马黑黑 发表于 2023-11-3 12:43

亦是金 发表于 2023-11-3 12:36
谢谢老师的代码！谢谢老师点赞！

{:4_191:}

红影 发表于 2023-11-3 13:00

亦是金 发表于 2023-11-3 10:53
这个好办！用一张图片挡一挡！就OK

哦，现在已经没有了呢。厉害{:4_187:}

红影 发表于 2023-11-3 13:01

亦是金 发表于 2023-11-3 10:55
问好红影！

这个路径很有特色，而且还真的是尝鲜呢，黑黑弄出来没多久{:4_173:}

红影 发表于 2023-11-3 13:02

亦是金 发表于 2023-11-3 10:56
这个不难，小菜一碟！

非常漂亮的路径{:4_187:}

红影 发表于 2023-11-3 13:02

亦是金 发表于 2023-11-3 11:12
修改了！

饿呢，看到亦是金老师修改好了{:4_187:}

亦是金 发表于 2023-11-3 13:08

马黑黑 发表于 2023-11-3 12:43


谢谢老师！{:4_190:}
页: [1] 2 3
查看完整版本: 《向 阳 花》 - 安与骑兵（尝鲜黑黑老师代码）