亦是金 发表于 2023-11-12 21:37

《鱼水情歌》 - 陈瑞 / 许强（再试黑黑老师多路径播放器）

本帖最后由 亦是金 于 2024-3-1 10:07 编辑 <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; }
#papa::before {
       position: absolute; content: '';
       width: 200px;
       height: 200px;
       top: 3.9%;
       left: 41.6%;
       background: url('data:image/svg+xml; charset=utf-8, <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="m126.68374,123.3644c-0.09869,-0.55641 -0.43863,-1.01073 -1.11126,-1.29224c-2.01479,-0.84368 -4.25488,-0.54497 -6.40454,0.17061c-0.27659,-0.20305 -0.65969,-0.32877 -1.08289,-0.32877c-0.84355,0 -1.52736,0.49911 -1.52736,1.11482c0,0.08658 0.01403,0.17075 0.03954,0.25168c-2.00597,0.92785 -3.79595,1.97416 -5.06156,2.43236c-0.9305,-0.29732 -2.85148,-0.73468 -4.9965,-0.19846c-2.86412,0.71596 -2.46827,1.97179 -1.02824,2.56902c-2.22912,1.00077 -4.75679,2.18864 -6.95976,3.23977c-1.93799,0.9247 -3.62509,1.74401 -4.63766,2.23826c-0.66279,0.32349 -1.29417,0.67955 -1.89058,1.06581c-3.11634,1.07354 -6.59926,1.67369 -10.27348,1.67369c-2.72639,0 -5.34666,-0.33025 -7.79042,-0.9392c-0.29913,-0.07454 -0.49778,-0.28268 -0.49016,-0.51338c0.00984,-0.2944 0.0978,-0.58704 0.29055,-0.86841c1.82876,-2.66969 1.84939,-11.28163 0.83689,-13.64626c-0.3313,0.60195 -2.27095,8.28919 -5.59069,8.94233c-3.18076,0.62586 -8.35047,-3.31542 -8.77653,-3.64544c0.93653,1.68031 2.10929,3.27173 3.48788,4.75285c2.97785,3.19933 6.91691,5.88342 11.51421,7.83089c5.19694,2.20185 11.23571,3.46245 17.67738,3.46245c3.10022,0 6.10682,-0.29217 8.97137,-0.84053l0.00044,0c1.31677,1.27715 1.9199,1.1151 2.35751,1.1202c1.34273,0.0157 2.2156,-1.4233 2.38341,-2.25415c2.95214,-1.04121 7.28738,-2.95042 9.7109,-4.52345c-0.02367,0.53955 0.3228,0.95963 0.44358,1.19117c0.26891,0.51454 0.86856,0.91882 1.82197,1.0312c2.98051,0.35138 1.92276,-4.34222 1.67047,-4.67085c-0.07908,-0.10367 -0.09869,-0.27526 -0.07305,-0.48656c0.24054,-0.21402 0.47639,-0.43106 0.70747,-0.65078c0.58479,-0.522 1.16895,-1.04362 1.75374,-1.56562c0.43298,-0.35856 0.94757,-0.8586 1.46236,-1.43669c0.074,0.00806 0.14959,0.01232 0.22664,0.01232c0.84355,0 1.52736,-0.49911 1.52736,-1.11482c0,-0.27022 -0.1317,-0.51792 -0.35079,-0.71087c0.78973,-1.19914 1.33219,-2.45669 1.16178,-3.41303l0,0.00005l-0.00001,0.00002zm-59.36746,-33.72884c0.09869,0.55641 0.43863,1.01073 1.11126,1.29224c2.01479,0.84368 4.25488,0.54497 6.40454,-0.17061c0.27659,0.20305 0.65969,0.32877 1.08289,0.32877c0.84355,0 1.52736,-0.49911 1.52736,-1.11482c0,-0.08658 -0.01403,-0.17075 -0.03954,-0.25168c2.00597,-0.92785 3.79595,-1.97416 5.06156,-2.43236c0.9305,0.29732 2.85148,0.73467 4.9965,0.19846c2.86412,-0.71596 2.46827,-1.97179 1.02824,-2.56902c2.22912,-1.00077 4.75679,-2.18864 6.95976,-3.23977c1.93799,-0.9247 3.62509,-1.74401 4.63766,-2.23826c0.66279,-0.32349 1.29417,-0.67955 1.89058,-1.06581c3.11634,-1.07354 6.59926,-1.67369 10.27348,-1.67369c2.72639,0 5.34666,0.33025 7.79042,0.9392c0.29913,0.07454 0.49778,0.28268 0.49016,0.51338c-0.00984,0.2944 -0.0978,0.58704 -0.29056,0.86841c-1.82876,2.66969 -1.84939,11.28163 -0.83689,13.64626c0.3313,-0.60195 2.27095,-8.28919 5.59069,-8.94233c3.18076,-0.62586 8.35047,3.31546 8.77652,3.64548c-0.93653,-1.68031 -2.10929,-3.27173 -3.48794,-4.75285c-2.97785,-3.19933 -6.91691,-5.88342 -11.51421,-7.83089c-5.19694,-2.20185 -11.23571,-3.46245 -17.67738,-3.46245c-3.10022,0 -6.10682,0.29217 -8.97137,0.84053l-0.00044,0c-1.31677,-1.27715 -1.9199,-1.1151 -2.35751,-1.1202c-1.34273,-0.0157 -2.2156,1.4233 -2.38341,2.25415c-2.95214,1.04121 -7.28738,2.95042 -9.7109,4.52345c0.02367,-0.53955 -0.3228,-0.95963 -0.44358,-1.19117c-0.26891,-0.51454 -0.86856,-0.91882 -1.82197,-1.0312c-2.98051,-0.35138 -1.92276,4.34222 -1.67047,4.67085c0.07908,0.10367 0.09869,0.27526 0.07305,0.48656c-0.24054,0.21407 -0.47639,0.43106 -0.70747,0.65078c-0.58479,0.522 -1.16895,1.04362 -1.75374,1.56562c-0.43298,0.35856 -0.94757,0.8586 -1.46236,1.43669c-0.074,-0.00806 -0.14959,-0.01232 -0.22664,-0.01232c-0.84355,0 -1.52736,0.49911 -1.52736,1.11482c0,0.27022 0.1317,0.51792 0.35079,0.71087c-0.78967,1.19909 -1.33213,2.45664 -1.16172,3.41298l0,-0.00005l0.00002,-0.00002z" fill="red" /></svg>');
       animation: rot 8s infinite linear var(--state);
}
@keyframes rot { to { transform: rotate(-1turn); } }

#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/51miz42469369934.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=1027325" 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: 300px; height: 300px;top: 5%; left: 40%; transform: perspective(800px) rotatez(0deg)',
                        path: 'm113.87354,21.0417l2.71534,-11.0417l2.71376,11.0417c5.19189,21.11316 27.70693,32.25562 47.00689,23.26331l10.09279,-4.70337l-6.70691,9.06707c-12.82552,17.33453 -7.26516,42.37258 11.60939,52.27176l9.87138,5.17793l-11.07961,0.26328c-21.18504,0.50382 -36.76545,20.58171 -32.52875,41.91915l2.21561,11.15872l-7.1086,-8.73715c-13.59094,-16.70883 -38.58095,-16.70883 -52.17189,0l-7.1086,8.73715l2.21402,-11.15872c4.23827,-21.33744 -11.34371,-41.41533 -32.52875,-41.91915l-11.07961,-0.26328l9.87138,-5.17793c18.87455,-9.89918 24.43492,-34.93723 11.60939,-52.27176l-6.70691,-9.06707l10.09279,4.70337c19.29996,8.99393 41.815,-2.15016 47.00689,-23.26331z   m8.12004,139.41886l-2.70893,11.12155l-2.70735,-11.12155c-5.17962,-21.26584 -27.64148,-32.48889 -46.89585,-23.43155l-10.06894,4.73738l6.69107,-9.13264c12.79523,-17.45989 7.248,-42.67901 -11.58197,-52.64977l-9.84807,-5.21538l11.05344,-0.26519c21.135,-0.50746 36.6786,-20.73055 32.45191,-42.22229l-2.21037,-11.23942l7.09181,8.80034c13.55884,16.82966 38.48981,16.82966 52.04865,0l7.09181,-8.80034l-2.20879,11.23942c-4.22826,21.49174 11.31691,41.71483 32.45191,42.22229l11.05344,0.26519l-9.84807,5.21538c-18.82997,9.97077 -24.3772,35.18988 -11.58197,52.64977l6.69107,9.13264l-10.06894,-4.73738c-19.25437,-9.05898 -41.71623,2.16571 -46.89585,23.43155z"/>',
                        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-12 21:51

亦是金 发表于 2023-11-12 21:59

醉美水芙蓉 发表于 2023-11-12 21:51
欣赏学习老师佳作！构思巧妙！

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

红影 发表于 2023-11-13 14:56

又是漂亮的花瓣路径，里面还有两条灵动的鱼儿呢。真好{:4_199:}

红影 发表于 2023-11-13 14:57

这海底风光的视频也很漂亮，欣赏好帖，给亦是金老师点赞{:4_199:}

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

红影 发表于 2023-11-13 14:56
又是漂亮的花瓣路径，里面还有两条灵动的鱼儿呢。真好

问好红影！你来了，真好！{:4_187:}

亦是金 发表于 2023-11-13 21:09

红影 发表于 2023-11-13 14:57
这海底风光的视频也很漂亮，欣赏好帖，给亦是金老师点赞

谢谢欣赏点赞夸奖！真好！{:4_187:}

红影 发表于 2023-11-14 16:35

亦是金 发表于 2023-11-13 21:08
问好红影！你来了，真好！

问好亦是金老师，再赏好帖{:4_187:}

红影 发表于 2023-11-14 16:36

亦是金 发表于 2023-11-13 21:09
谢谢欣赏点赞夸奖！真好！

路径美，视频也特别美，看着鱼儿游动，感觉很悠闲呢{:4_173:}

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

一个比一个精彩，一个比一个又难度，亦是金老师很牛的{:4_199:}
页: [1]
查看完整版本: 《鱼水情歌》 - 陈瑞 / 许强（再试黑黑老师多路径播放器）