亦是金 发表于 2023-10-29 21:59

《随心摇摆》 - 安与骑兵

<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/10/29/dzbj.gi') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }

#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: .5;
}
#vid2 {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0%;
    left:0%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 3;
    opacity: .3;
}
</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:36px;">《随心摇摆》</span>
<span style="color:#3d46f7;"><span style="font-size:28px;">   - - 安与骑兵</span></div>

</style>



<div id="papa">

<video id="vid1" src="https://imgs-qn.51miz.com/preview/video/00/00/14/37/V-143700-13FF8DE9.mp4" autoplay="" loop="" muted=""></video>
<video id="vid2" src="https://imgs-qn.51miz.com/preview/video/00/00/14/95/V-149527-BEA5BB61.mp4" autoplay="" loop="" muted=""></video>




        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27902891.mp3" autoplay loop></audio>
</div>

<script>

(function() {
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
];

      let rippleJs = 'https://638183.freep.cn/638183/web/svg/ripple-min.j',
                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: 50%; left: 75%; transform: perspective(800px) rotatez(10deg)',
                        path: 'm4,148.70725c0,-6.07559 4.27794,-11.32328 10.57098,-14.1721l0,-39.30495c0,-2.24974 2.30579,-8.2302 10.57098,-8.2302c2.35204,0 4.68757,0.61193 6.60025,1.80494l28.08907,17.49143c14.10895,8.77786 31.82194,13.61416 49.87849,13.61416l63.42586,0c11.67763,0 21.14195,7.3663 21.14195,16.45527l0,24.6829c0,9.08896 -9.46433,16.45527 -21.14195,16.45527l-11.13256,0c0.45918,2.69455 0.72015,5.43538 0.72015,8.22763c0,10.22541 -3.05898,19.88773 -8.44357,28.52418c-1.71448,2.74854 -5.45727,4.38636 -9.38174,4.38636l-24.53788,0c-8.60544,0 -13.772,-7.67227 -8.55588,-12.99966c5.41763,-5.53308 8.63847,-12.43401 8.63847,-19.91087c0,-2.85653 -0.53516,-5.6025 -1.45681,-8.22763l-9.27603,0c-18.05655,0 -35.76954,4.83631 -49.87519,13.61416l-28.08907,17.49143a-10.57857,8.23355 0 0 0 -6.60025,1.80494c-8.23215,0 -10.57098,-5.85705 -10.57098,-8.22763l0,-39.30495c-6.29634,-2.85139 -10.57428,-8.09908 -10.57428,-14.17467zm31.71293,36.361l10.91784,-6.79808c17.83852,-11.10731 40.24569,-17.22147 63.079,-17.22147l0,-24.6829c-22.83331,0 -45.24048,-6.11416 -63.079,-17.22147l-10.91784,-6.79808l0,72.72199z',
                        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: -50, y: 0},
                });
        });
})();

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

红影 发表于 2023-10-29 22:06

这个喇叭又是转了角度的，真漂亮。欣赏亦是金老师好帖{:4_199:}

红影 发表于 2023-10-29 22:06

画面制作也很漂亮。亦是金老师带来的路径效果真多啊{:4_199:}

亦是金 发表于 2023-10-29 22:44

红影 发表于 2023-10-29 22:06
这个喇叭又是转了角度的，真漂亮。欣赏亦是金老师好帖

问好红影！{:4_187:}

亦是金 发表于 2023-10-29 22:44

红影 发表于 2023-10-29 22:06
画面制作也很漂亮。亦是金老师带来的路径效果真多啊

谢谢欣赏点赞！！{:4_187:}

红影 发表于 2023-10-29 23:48

亦是金 发表于 2023-10-29 22:44
问好红影！

问好亦是金老师，晚上好{:4_187:}

红影 发表于 2023-10-29 23:49

亦是金 发表于 2023-10-29 22:44
谢谢欣赏点赞！！

这个喇叭路径很有特色{:4_173:}

亦是金 发表于 2023-10-30 07:28

红影 发表于 2023-10-29 23:48
问好亦是金老师，晚上好

早上好！{:4_187:}

亦是金 发表于 2023-10-30 07:29

红影 发表于 2023-10-29 23:49
这个喇叭路径很有特色

{:4_205:}

世外桃源 发表于 2023-10-30 12:31

欣赏欣赏

世外桃源 发表于 2023-10-30 12:32

热烈奔放

红影 发表于 2023-10-30 13:29

亦是金 发表于 2023-10-30 07:28
早上好！

问好亦是金，新周快乐{:4_187:}

红影 发表于 2023-10-30 13:30

亦是金 发表于 2023-10-30 07:29


又是一个新路径呢{:4_173:}

亦是金 发表于 2023-10-30 15:43

世外桃源 发表于 2023-10-30 12:31
欣赏欣赏

问好！{:4_176:}

亦是金 发表于 2023-10-30 15:44

世外桃源 发表于 2023-10-30 12:32
热烈奔放

谢谢欣赏！祝你欣赏愉快！{:4_176:}

亦是金 发表于 2023-10-30 15:45

红影 发表于 2023-10-30 13:29
问好亦是金，新周快乐

问好！新周快乐！{:4_187:}

亦是金 发表于 2023-10-30 15:45

红影 发表于 2023-10-30 13:30
又是一个新路径呢

谢谢欣赏！{:4_187:}

红影 发表于 2023-10-30 19:19

亦是金 发表于 2023-10-30 15:45
问好！新周快乐！

我也做了个贝壳的，被亦是金老师引得只想找到好玩的路径。人的相互影响能量还是挺大的{:4_173:}

红影 发表于 2023-10-30 19:20

亦是金 发表于 2023-10-30 15:45
谢谢欣赏！

谢什么啊，应该谢谢亦是金老师才是{:4_187:}

冬天的雨 发表于 2023-11-1 20:20

这个是喇叭路径，哈哈千奇百态，亦是金做的路径真好{:4_178:}
页: [1] 2
查看完整版本: 《随心摇摆》 - 安与骑兵