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

《 海 妖 》 - 黑相簿

本帖最后由 亦是金 于 2024-3-1 11:20 编辑 <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: -50px; LEFT: 0px;background: url('') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }

#mydiv::before,
#mydiv::after { position: absolute; left: 0px; top: 0px; content:url('');mix-blend-mode: normal;offset-path: path('M-20,420 L1224,20'); font-size: 30px; animation: move 30s var(--delay) infinite var(--state); --delay: 0s; }
#mydiv::after { --delay: -15s; }
@keyframes move { from {offset-distance: 0%; transform: rotate(0deg); } to { offset-distance: 100%; transform: rotate(720deg); } }

#sky { position: absolute; width: 1200px; height: 700px; top:0; left: 0; transform: rotate(0deg); }


#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: .9;
}
#vid2 {
    position: absolute;
    width: 0%;
    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>


<div id="papa">

<div id="mydiv"></div>


      <div id="sky"></div>

<video id="vid1" src="https://imgs-qn.51miz.com/vcg/video/preview/51miz42584565156.mp4" autoplay="" loop="" muted=""></video>
<video id="vid2" src="" autoplay="" loop="" muted=""></video>

<audio id="aud" src="https://mp3.t57.cn:7087/kwlink_d.php?id=46867698" 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: 950px; height: 650px;top: 5%; left: 40%; transform: perspective(800px) rotatez(0deg)',
                        path: 'm73.59241,65.03308l7.78565,0c1.50136,0 2.71665,0.79902 2.71665,1.78529c0,0.98715 -1.21563,1.786 -2.71665,1.786l-0.36224,0c-1.50152,0 -2.71871,0.79973 -2.71871,1.786c0,0.98484 1.21717,1.786 2.71871,1.786l16.73746,0c1.5029,0 2.71853,0.79902 2.71853,1.78387c0,0.98697 -1.21563,1.786 -2.71853,1.786l-42.22216,0c-1.4993,0 -2.71853,-0.79902 -2.71853,-1.786c0,-0.98484 1.21923,-1.78387 2.71853,-1.78387l4.64427,0c1.50119,0 2.71853,-0.80133 2.71853,-1.786c0,-0.98627 -1.21735,-1.786 -2.71853,-1.786l-22.10672,0c-1.50136,0 -2.71853,-0.79902 -2.71853,-1.786c0,-0.98627 1.21717,-1.78529 2.71853,-1.78529l35.52374,0l-0.00001,0zm-58.40666,-29.85864l2.50626,0c0.48499,0 0.87685,0.43963 0.87685,0.98218c0,0.53991 -0.39186,0.97934 -0.87685,0.97934l-0.11539,0c-0.48328,0 -0.87496,0.43963 -0.87496,0.9813c0,0.54079 0.39168,0.98112 0.87496,0.98112l5.38913,0c0.48328,0 0.87496,0.43945 0.87496,0.97988c0,0.54238 -0.39168,0.9813 -0.87496,0.9813l-13.5942,0c-0.48328,0 -0.87496,-0.43926 -0.87496,-0.9813c0,-0.54061 0.39168,-0.97988 0.87496,-0.97988l1.49536,0c0.48328,0 0.87514,-0.44033 0.87514,-0.98112c0,-0.54202 -0.39186,-0.9813 -0.87514,-0.9813l-7.11731,0c-0.48328,0 -0.87496,-0.43945 -0.87496,-0.97934c0,-0.54292 0.39186,-0.98218 0.87496,-0.98218l11.43615,0zm91.51008,17.26826l2.50608,0c0.48328,0 0.87514,0.43945 0.87514,0.98201c0,0.54185 -0.39186,0.97952 -0.87514,0.97952l-0.1171,0c-0.48328,0 -0.87496,0.43963 -0.87496,0.98112c0,0.54309 0.39168,0.98094 0.87496,0.98094l5.38913,0c0.48157,0 0.87342,0.43963 0.87342,0.98005c0,0.54202 -0.39168,0.9813 -0.87342,0.9813l-13.59437,0c-0.4831,0 -0.87479,-0.43963 -0.87479,-0.9813c0,-0.54079 0.39168,-0.98005 0.87479,-0.98005l1.49571,0c0.4831,0 0.87496,-0.4382 0.87496,-0.98094c0,-0.54185 -0.39186,-0.98112 -0.87496,-0.98112l-7.11766,0c-0.4831,0 -0.87496,-0.43767 -0.87496,-0.97952c0,-0.54292 0.39186,-0.98201 0.87496,-0.98201l11.4382,0zm-74.65561,26.49385a2.0478,2.12304 0 0 1 -1.55425,-0.7346c-4.93718,-5.90606 -6.1309,-7.21019 -10.44204,-8.74754c-2.86473,0.06656 -9.80315,3.20745 -14.55528,6.64935c-0.67553,0.49003 -1.56538,0.5202 -2.26265,0.06549a2.05328,2.12871 0 0 1 -0.94824,-2.13227c1.13501,-7.73891 6.98378,-17.26702 17.18957,-20.39762c10.06301,-19.99438 24.2415,-32.95711 31.22887,-38.53908c-3.1561,-4.75616 -8.77035,-5.84181 -12.0218,-6.05248c-0.99223,-0.06727 -1.79769,-0.85687 -1.91513,-1.87882c-0.11521,-1.02194 0.49064,-1.9862 1.43887,-2.28792c6.84477,-2.17592 15.66836,-0.96319 23.27135,2.99305c1.223,-0.64532 2.34139,-1.16534 3.32798,-1.54871c5.67673,-2.22332 10.01354,-3.26247 13.64196,-3.26247c6.08315,0 10.43108,2.98826 13.60686,9.37281c5.39118,0.56564 8.1116,1.93775 8.76505,4.39267c0.56938,2.14557 -0.85134,4.09095 -2.36879,5.19843c-0.39373,0.28184 -0.87873,0.41566 -1.34386,0.3768c-5.88011,-0.4918 -12.12417,0.48967 -18.9306,2.85143c0.4064,7.47979 -2.2921,19.81122 -3.92304,22.3476c-0.50331,0.77737 -1.44075,1.12684 -2.30681,0.85334a2.05567,2.1312 0 0 1 -1.45873,-2.03927c0,-2.99856 -1.67512,-6.03615 -4.84388,-8.78215c-1.54878,-1.34264 -2.57045,-3.15155 -2.95666,-5.0238c-14.44519,8.53208 -26.41239,19.93297 -31.78867,25.42816c1.33804,5.0884 3.04808,13.34964 3.19445,18.13437a2.03547,2.11025 0 0 1 0.09331,0.63201c0,1.19108 -0.92632,2.0421 -2.0942,2.13173l-0.04365,0l0,-0.00053l0.00001,0l-0.00001,0.00001zm124.93426,-31.1169c1.70774,0.86443 2.62295,1.55233 2.74602,2.06957c-4.15047,12.76035 -6.40726,19.65428 -6.77342,20.68826l-0.18288,0c-1.83043,-1.20784 -2.74602,-1.89895 -2.74602,-2.0685l6.77305,-20.68934l0.18328,0l-0.00001,0l-0.00001,0.00001zm-5.85783,-36.46283l2.74602,0c0.24309,0 0.97542,4.13754 2.19697,12.41263l-0.36616,0.25783l-2.74602,0c-0.12307,0 -0.54906,-2.58576 -1.28137,-7.75784c-0.12307,0 -0.42902,-1.55179 -0.91521,-4.65373l0.36578,-0.2589l0.00001,0l-0.00001,0.00001zm0,18.36086l2.74602,0c0.24309,0 0.97542,4.22744 2.19697,12.67154l-3.11219,0c-0.12307,0 -0.85502,-4.13808 -2.19659,-12.41317l0.36578,-0.25836l0.00001,-0.00001zm18.85487,-4.65535l14.2788,0c3.17201,0 5.30877,1.98453 6.40688,5.94822c0.11964,1.38115 0.1825,2.41621 0.1825,3.10356l0,11.11975l2.19697,0c0.12002,0 0.18288,0.08882 0.18288,0.25836l0,3.87864c0,0.34771 -0.06325,0.51727 -0.18288,0.51727l-2.19697,0l0,11.89592c0,4.48096 -1.46465,7.41065 -4.39357,8.79236c-0.61155,0.16954 -1.28099,0.25836 -2.01333,0.25836l-14.64535,0c-2.92892,0 -4.94261,-1.89895 -6.04071,-5.68879c-0.12307,-1.03452 -0.18288,-1.89519 -0.18288,-2.5863l0,-12.67154l-2.19697,0c-0.12307,0 -0.18288,-0.16954 -0.18288,-0.51726l0,-3.87864c0,-0.16954 0.06019,-0.25836 0.18288,-0.25836l2.19697,0l0,-11.89592c0,-3.96369 1.52448,-6.63504 4.57645,-8.0178c0.85311,-0.16901 1.46503,-0.25782 1.83119,-0.25782l0.00001,-0.00001l0,-0.00001zm-2.56276,-12.9299l0.36616,0c-0.36616,2.76016 -0.54866,4.31194 -0.54866,4.65481l24.16403,0c0.11964,0 0.1825,0.08882 0.1825,0.25783l0,3.87918c0,0.17332 -0.06286,0.25836 -0.1825,0.25836l-28.37471,0l0,-0.25836c2.92892,-5.68772 4.39318,-8.61795 4.39318,-8.79182zm-0.73232,21.20553l0,11.89592l20.86894,0l0,-11.37865c0,-1.72133 -0.42902,-2.92971 -1.28137,-3.62136c-0.36616,-0.34341 -0.91521,-0.51727 -1.64753,-0.51727l-15.19401,0c-1.83043,0.51834 -2.74602,1.72618 -2.74602,3.62136l-0.00001,0l0.00001,0zm0,16.55018l0,12.92936c0,1.72133 0.91521,2.84466 2.74602,3.36193l15.19401,0c1.21851,0 2.07352,-0.69111 2.56276,-2.06904c0.24347,-0.51727 0.36654,-1.20407 0.36654,-2.06957l0,-12.15427l-20.86933,0l0,0.00162l0,0l0,-0.00001l0,-0.00001zm8.05481,-18.36032c1.21851,1.55179 3.66124,4.91317 7.32286,10.08523c0,0.17278 -0.79519,1.2073 -2.37985,3.10356c-1.34424,-1.55179 -3.72411,-4.9137 -7.1392,-10.08523c-0.00038,-0.17008 0.73156,-1.2046 2.19621,-3.10356l-0.00001,0zm0,19.13648c1.34158,1.72564 3.72182,5.17207 7.13921,10.34413c0,0.17386 -0.73194,1.20838 -2.1966,3.1041l-7.1392,-10.08523c0,-0.17116 0.73194,-1.29396 2.19659,-3.36299l0,-0.00001zm79.16355,-39.56585l2.74602,0l0.36616,0.25836l-0.1825,2.0685l0,4.39645l-0.18288,0.51727l11.16737,0c0.24309,0 0.36616,0.08882 0.36616,0.25783l0,3.87918c0,0.17332 -0.12307,0.25836 -0.36616,0.25836l-1.64753,0l0,5.94768c0,14.82939 -1.22156,24.39735 -3.66124,28.705l-0.91484,2.0685c3.66086,3.968 5.91765,6.54999 6.77305,7.75836l-1.83081,3.36139l-7.1392,-7.75783c-2.68582,3.44643 -5.00549,5.94822 -6.95632,7.49947l-0.1825,0c-0.12307,0 -0.6725,-1.12333 -1.64753,-3.36085c2.31699,-2.06957 4.39357,-4.39699 6.22399,-6.98328c-2.56313,-2.75531 -3.84413,-6.46494 -3.84413,-11.11975c0,-1.89519 0.1825,-10.60196 0.54866,-26.11762l-2.56276,0c-0.12307,0 -0.18288,-0.08505 -0.18288,-0.25836l0,-3.87918c0,-0.169 0.06019,-0.25782 0.18288,-0.25782l2.56276,0l0,-0.51727c0,-1.72133 0.06019,-3.87918 0.18288,-6.46494l0.18137,-0.25944l-0.00003,0l0.00002,-0.00001zm2.82649,10.49578l0,2.0685c-0.24614,14.48168 -0.36578,22.58776 -0.36578,24.30855c0,2.93348 0.85234,5.34592 2.56313,7.24111c1.58429,-2.41244 2.68315,-6.20659 3.2947,-11.37919c0.48618,-3.62082 0.73232,-9.47863 0.73232,-17.58524l0,-4.65373l19.95335,0l-26.17773,0l0.00001,-0.00001zm36.74402,-7.29164c0.12002,0.34771 0.18288,0.6066 0.18288,0.77509c0,1.03452 0.11964,2.2429 0.36616,3.62136l-0.36616,0.25782c-4.51663,0.34771 -7.32286,0.60606 -8.42134,0.77562l0,8.01673c0,1.72564 -0.06286,4.56976 -0.1825,8.53399l9.51869,0c0.12002,0 0.18288,0.08882 0.18288,0.25782l0,3.87864c0,0.17386 -0.06325,0.25836 -0.18288,0.25836l-8.78713,0l0,0.25783c5.97747,19.4842 8.97002,29.39126 8.97002,29.73951l-2.74602,1.55125c-0.36616,-0.51727 -2.99217,-9.05018 -7.87153,-25.60035l-0.18288,0c-1.34387,7.24057 -3.66086,13.70552 -6.95632,19.39484c-2.44274,3.10356 -4.27316,4.9137 -5.49205,5.43097c3.4151,-5.00251 5.85821,-10.08577 7.32286,-15.25784c1.83043,-7.92792 2.74602,-13.10052 2.74602,-15.5162l-9.33656,0c-0.12269,0 -0.1825,-0.08451 -0.1825,-0.25836l0,-3.87864c0,-0.169 0.06019,-0.25782 0.1825,-0.25782l9.70272,0l0,-16.29289l-8.60386,0.77562c-0.12307,0 -0.24614,-1.46297 -0.36616,-4.39645c0.00038,-0.16739 6.83363,-0.85852 20.50317,-2.0669l-0.00001,0.00001z',
                        btn: {left: 34, top: 20},
                        track: {track: '#dff3fa', prog: '#f9b642'},
                        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: 30, height: 30},
                        shape: {background: 'url("") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toLeft',
                        maxTime: 20,
                        offset: {x: -50, y: 0},
                });
        });
})();

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

小辣椒 发表于 2023-11-10 21:31

哇塞~~~这个漂亮，前面一个是测试，现在完全是测试成功，投入生产了{:4_173:}

小辣椒 发表于 2023-11-10 21:33

这个路径代码有点多的，但出来速度不慢的

亦是金 发表于 2023-11-10 21:49

小辣椒 发表于 2023-11-10 21:31
哇塞~~~这个漂亮，前面一个是测试，现在完全是测试成功，投入生产了

哈哈哈！即将投入批量生产了！{:4_172:}

亦是金 发表于 2023-11-10 21:49

小辣椒 发表于 2023-11-10 21:33
这个路径代码有点多的，但出来速度不慢的

问好小辣椒！{:4_187:}

醉美水芙蓉 发表于 2023-11-10 22:05

亦是金 发表于 2023-11-10 22:16

醉美水芙蓉 发表于 2023-11-10 22:05
老师这个速度快！

问好水芙蓉！{:4_187:}这个去掉了一些代码，减少了一些动画，速度就快一些了！

世外桃源 发表于 2023-11-11 12:23

好制作，不会就欣赏欣赏了{:4_187:}

亦是金 发表于 2023-11-11 19:15

世外桃源 发表于 2023-11-11 12:23
好制作，不会就欣赏欣赏了

问好！祝你欣赏愉快！{:4_190:}

红影 发表于 2023-11-12 22:55

好漂亮的鱼的路径加文字路径，视频也好美。欣赏亦是金老师好帖{:4_199:}

亦是金 发表于 2023-11-13 10:38

红影 发表于 2023-11-12 22:55
好漂亮的鱼的路径加文字路径，视频也好美。欣赏亦是金老师好帖

问好红影！谢谢欣赏夸奖！{:4_187:}

红影 发表于 2023-11-13 21:33

亦是金 发表于 2023-11-13 10:38
问好红影！谢谢欣赏夸奖！

不客气啊，应该谢谢亦是金老师带来的精彩才是{:4_187:}

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

今天开了眼界，亦是金老师做了这么多的路径播放器{:4_199:}

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

个个精彩，每个图和播放器都很相配

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

音乐也是好听{:4_208:}
页: [1]
查看完整版本: 《 海 妖 》 - 黑相簿