亦是金 发表于 2023-10-26 17:40

《 哦 想 》 - 安与骑兵

<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/26/2872.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; }
</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:38px;">《 哦   想 》</span>
<span style="color:#3d46f7;"><span style="font-size:28px;">   - - 安与骑兵</span></div>
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=25731633.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: 48%; left: 75%;',
                        path: 'm112.81902,172.08346c2.3016,1.90963 6.04992,1.90963 8.3844,0l35.80633,-29.47029c10.39008,-8.56754 9.79824,-22.76077 -1.84128,-30.65736c-10.12704,-6.89016 -25.21897,-5.65148 -34.49113,1.98705l-3.68256,3.01929l-3.64968,-2.99348c-9.27216,-7.66434 -24.36409,-8.90302 -34.49113,-2.01286c-11.60664,7.89659 -12.23136,22.08981 -1.84128,30.65736l35.80633,29.47029zm95.35203,20.02534c-3.87984,-2.76123 -9.92976,-2.58059 -14.00688,0l-30.38113,19.07053c-3.71544,2.34833 -8.35152,3.61282 -13.152,3.61282l-38.89705,0c-2.89344,0 -5.2608,-1.85802 -5.2608,-4.12894s2.36736,-4.12894 5.2608,-4.12894l25.74505,0c5.22792,0 10.09416,-2.81284 10.94904,-6.86436c1.08504,-5.16117 -3.97848,-9.65139 -10.39008,-9.65139l-52.60801,0c-8.8776,0 -17.45928,2.39994 -24.36409,6.78694l-15.2892,9.72881l-18.21552,0c-2.89344,0 -5.2608,1.85802 -5.2608,4.12894l0,24.77362c0,2.27092 2.36736,4.12894 5.2608,4.12894l117.31587,0c4.7676,0 9.40368,-1.26449 13.152,-3.61282l49.71457,-31.22509c4.99776,-3.12251 5.39232,-9.10947 0.42744,-12.61906z',
                        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/256.gif") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toRight',
                        maxTime: 20,
                        offset: {x: -50, y: 0},
                });
        });
})();

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

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

啊~~这种路径还分开的,我不会做的,过几天跟前辈学习一下,最近暂时不做复杂的,简单的路径玩玩算了

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

精彩的制作,谢谢分享了{:4_187:}

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

小辣椒 发表于 2023-10-26 17:42
啊~~这种路径还分开的,我不会做的,过几天跟前辈学习一下,最近暂时不做复杂的,简单的路径玩玩算了

问好小辣椒!真高兴看见你了!{:4_187:}

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

小辣椒 发表于 2023-10-26 17:42
啊~~这种路径还分开的,我不会做的,过几天跟前辈学习一下,最近暂时不做复杂的,简单的路径玩玩算了

这个挺简单的!到这里看看就会的。https://www.huachaowang.com/forum.php?mod=viewthread&tid=71959&extra=page%3D1

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

小辣椒 发表于 2023-10-26 17:43
精彩的制作,谢谢分享了

谢谢欣赏!近期你还是少上网为好!多多保重身体!{:4_187:}

红影 发表于 2023-10-26 18:54

这个路径真漂亮,捧在手心的心,好浪漫{:4_199:}

红影 发表于 2023-10-26 18:55

制作也好漂亮,设计了那么多动态效果。还有水波纹效果。欣赏亦是金老师好帖{:4_199:}

红影 发表于 2023-10-26 18:56

关于播放器路径的效果被亦是金老师给玩得出神入化{:4_173:}

小辣椒 发表于 2023-10-26 22:04

亦是金 发表于 2023-10-26 18:13
问好小辣椒!真高兴看见你了!

谢谢前辈关心,我上来完成一个作业,马上就下了

小辣椒 发表于 2023-10-26 22:05

亦是金 发表于 2023-10-26 18:16
这个挺简单的!到这里看看就会的。https://www.huachaowang.com/forum.php?mod=viewthread&tid=71959&ext ...

好的,我过几天上来看看

小辣椒 发表于 2023-10-26 22:05

亦是金 发表于 2023-10-26 18:19
谢谢欣赏!近期你还是少上网为好!多多保重身体!

好的,谢谢{:4_187:}

亦是金 发表于 2023-10-26 22:14

红影 发表于 2023-10-26 18:54
这个路径真漂亮,捧在手心的心,好浪漫

{:4_189:}

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

红影 发表于 2023-10-26 18:55
制作也好漂亮,设计了那么多动态效果。还有水波纹效果。欣赏亦是金老师好帖

谢谢红影点评!{:4_187:}

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

红影 发表于 2023-10-26 18:56
关于播放器路径的效果被亦是金老师给玩得出神入化

喜欢听红影替我吹嘘!感觉比喝茅台还爽!!!{:4_189:}{:4_189:}{:4_189:}

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

小辣椒 发表于 2023-10-26 22:04
谢谢前辈关心,我上来完成一个作业,马上就下了

好,注意多休息!{:4_187:}

亦是金 发表于 2023-10-26 22:23

小辣椒 发表于 2023-10-26 22:05
好的,我过几天上来看看

不急!慢慢来!{:4_187:}

亦是金 发表于 2023-10-26 22:23

小辣椒 发表于 2023-10-26 22:05
好的,谢谢

{:4_187:}

红影 发表于 2023-10-27 10:50

亦是金 发表于 2023-10-26 22:14


这些路径真的很开眼,非常赞{:4_199:}

红影 发表于 2023-10-27 10:51

亦是金 发表于 2023-10-26 22:15
谢谢红影点评!

不客气啊,亦是金老师带来这么多漂亮的路径,应该谢谢你才是呢{:4_187:}
页: [1] 2
查看完整版本: 《 哦 想 》 - 安与骑兵