亦是金 发表于 2023-10-25 23:18

《法 图 麦》 (DJ版) - 蛋糕姐姐

本帖最后由 亦是金 于 2023-10-25 23:37 编辑 <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('tooopen_sy_143179554183.jp') 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: .99;
}
#vid2 {
    position: absolute;
    width: 100%;
    height: 110%;
    top:0%;
    left:0%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 3;
    opacity: .99;
}





</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: -350px;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;">《法 图 麦》 (DJ版) </span>
<span style="color:#3d46f7;"><span style="font-size:26px;">   - - 蛋糕姐姐 </span></div>

</style>



<div id="papa">

<video id="vid1" src="https://imgs-qn.51miz.com/preview/video/00/00/12/73/V-127377-6AFE803F.mp4" autoplay="" loop="" muted=""></video>
<video id="vid2" src="https://imgs-qn.51miz.com/preview/element/00/01/25/25/E-1252550-EA00A6C1.mp4" autoplay="" loop="" muted=""></video>


        <audio id="aud" src="https://www.qqmc.com/mp3/music182877848.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://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 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;',
                        player_css: 'width: 350px; height: 360px;top: 59%; left: 78%; ',
                        path: 'm201.45064,55.5758c13.12914,0 23.72146,-8.69617 23.72146,-19.40932c0,-8.26632 -14.10826,-24.96429 -20.56156,-32.17252c-1.6022,-1.75246 -4.76209,-1.75246 -6.31979,0c-6.4533,7.20823 -20.56156,23.9062 -20.56156,32.17252c0,10.71315 10.59232,19.40932 23.72146,19.40932zm-85.45065,79.35668c23.09838,0 51.3149,-10.87848 54.87534,-26.45223c0.75659,-3.27346 -3.42693,-6.11708 -7.87748,-5.05899c-11.52694,2.74442 -28.66157,4.33155 -46.99786,4.33155s-35.42642,-1.58713 -46.99786,-4.33155c-4.36154,-1.02502 -8.63408,1.75246 -7.87748,5.05899c3.56044,15.57375 31.77696,26.45223 54.87534,26.45223zm57.99073,-55.64887c1.6022,-0.36372 2.67033,-1.48794 2.53682,-2.74442c-1.46868,-13.92048 -14.33079,-23.60861 -24.92311,-23.60861s-23.45442,9.68813 -24.92311,23.60861c-0.13352,1.22342 0.93462,2.3807 2.53682,2.74442c1.55769,0.36372 3.29341,-0.16533 4.13902,-1.22342l4.22803,-5.6211c3.42693,-4.52994 8.54507,-7.1421 14.01925,-7.1421s10.59232,2.61216 14.01925,7.1421l4.22803,5.6211c0.93462,1.19035 2.75934,1.521 4.13902,1.22342zm46.86434,-17.49153c-10.94837,5.19125 -20.47255,4.26542 -20.65057,4.26542c3.07088,6.67919 4.8066,13.82129 4.8066,21.26098c0,36.47101 -39.92148,66.13056 -89.0111,66.13056s-89.0111,-29.65956 -89.0111,-66.13056s39.92148,-66.13056 89.0111,-66.13056c17.71321,0 34.18026,3.9017 48.06599,10.54782c0.75659,-3.1412 2.80385,-7.96873 7.65495,-15.11083c-16.37804,-7.1421 -35.38191,-11.30833 -55.72095,-11.30833c-60.9726,0 -110.37376,36.70246 -110.37376,82.0019s49.40116,82.0019 110.37376,82.0019s110.37376,-36.70246 110.37376,-82.0019c0,-8.92763 -1.95824,-17.49153 -5.51869,-25.5264zm-140.45951,3.50492c5.47418,0 10.59232,2.61216 14.01925,7.1421l4.22803,5.6211c0.93462,1.22342 2.75934,1.55407 4.13902,1.22342c1.6022,-0.36372 2.67033,-1.48794 2.53682,-2.74442c-1.46868,-13.92048 -14.33079,-23.60861 -24.92311,-23.60861s-23.45442,9.68813 -24.92311,23.60861c-0.13352,1.22342 0.93462,2.3807 2.53682,2.74442c1.55769,0.36372 3.29341,-0.16533 4.13902,-1.22342l4.22803,-5.6211c3.42693,-4.56301 8.54507,-7.1421 14.01925,-7.1421z',
                        btn: {left: 34, top: 20},
                        track: {track: '#47cffc', prog: '#fe64e7'},
                        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: 100, height: 100},
                        shape: {background: 'url("https://www.huachaowang.com/static/image/smiley/hcbiaoqing2/111.gif") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toBottom',
                        maxTime: 25,
                        offset: {x: -100, y: 0},
                });
        });
})();

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

醉美水芙蓉 发表于 2023-10-26 07:06

亦是金 发表于 2023-10-26 09:01

醉美水芙蓉 发表于 2023-10-26 07:06
欣赏老师佳作!

问好水芙蓉!谢谢欣赏!{:4_187:}

红影 发表于 2023-10-26 12:32

好有趣,这个笑脸路径特别有趣,歌曲也特别滑稽。
粒子用论坛的表情,看着特别亲切{:4_173:}

红影 发表于 2023-10-26 12:34

这种带了内部线条的播放器路径唯一的麻烦是看不出进行到哪了,试着去点了一下,好像点外侧,从旁边进度时间才能知道进行到哪了,从路径上看不出{:4_173:}

红影 发表于 2023-10-26 12:35

蛋糕姐姐,亦是金老师选的歌曲演唱者都这么奇特{:4_173:}

红影 发表于 2023-10-26 12:35

再播放器路径方面,亦是金老师尝试了这么多的可能,很赞{:4_199:}

亦是金 发表于 2023-10-26 13:09

红影 发表于 2023-10-26 12:32
好有趣,这个笑脸路径特别有趣,歌曲也特别滑稽。
粒子用论坛的表情,看着特别亲切

问好红影!谢谢欣赏点评!{:4_187:}

亦是金 发表于 2023-10-26 13:10

红影 发表于 2023-10-26 12:34
这种带了内部线条的播放器路径唯一的麻烦是看不出进行到哪了,试着去点了一下,好像点外侧,从旁边进度时间 ...

{:4_189:}

亦是金 发表于 2023-10-26 13:12

红影 发表于 2023-10-26 12:35
蛋糕姐姐,亦是金老师选的歌曲演唱者都这么奇特

在抖音上听到这首歌,觉得有趣,就弄了一个玩玩!{:4_205:}

亦是金 发表于 2023-10-26 13:15

红影 发表于 2023-10-26 12:35
再播放器路径方面,亦是金老师尝试了这么多的可能,很赞

还准备再玩玩一些不同的路径呢!{:4_196:}

红影 发表于 2023-10-26 14:03

亦是金 发表于 2023-10-26 13:09
问好红影!谢谢欣赏点评!

其实上次的玫瑰花也是论坛表情吧,这个灵机一动特别好,这思路太灵活了{:4_199:}

红影 发表于 2023-10-26 14:04

亦是金 发表于 2023-10-26 13:10


还是只有外轮廓的或延伸线段的最好,看得更明确呢{:4_204:}

红影 发表于 2023-10-26 14:04

亦是金 发表于 2023-10-26 13:12
在抖音上听到这首歌,觉得有趣,就弄了一个玩玩!

这个歌手的发音不知是哪的,歌词内容也特别好玩{:4_189:}

红影 发表于 2023-10-26 14:05

亦是金 发表于 2023-10-26 13:15
还准备再玩玩一些不同的路径呢!

哦?还有哪里能找到这么方便的路径{:4_173:}

亦是金 发表于 2023-10-26 16:19

红影 发表于 2023-10-26 14:03
其实上次的玫瑰花也是论坛表情吧,这个灵机一动特别好,这思路太灵活了

是的!就地取材,简单方便!{:4_189:}

亦是金 发表于 2023-10-26 16:20

红影 发表于 2023-10-26 14:04
还是只有外轮廓的或延伸线段的最好,看得更明确呢

对!{:4_181:}

亦是金 发表于 2023-10-26 16:21

红影 发表于 2023-10-26 14:04
这个歌手的发音不知是哪的,歌词内容也特别好玩

{:4_189:}

亦是金 发表于 2023-10-26 16:29

红影 发表于 2023-10-26 14:05
哦?还有哪里能找到这么方便的路径

我还是在老地方找了一些,制作好了一大把路径,准备适时发布!{:4_189:}

小辣椒 发表于 2023-10-26 17:34

前辈这个漂亮脸路径我不会做,就纯欣赏了
页: [1] 2
查看完整版本: 《法 图 麦》 (DJ版) - 蛋糕姐姐