亦是金 发表于 2023-10-11 18:24

《好人一生平安》 - 梦之旅 TO:小辣椒

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1973151">
<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:50px;margin-LEFT: -310px;">

<style>
#papa { margin: auto; width: 1200px; height: 700px;top: -80px;left: 0px; background: url('https://ysj147.s3-us-east-1.ossfiles.com/zzsc/gif/252haijing.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; }
#sky { position: absolute; width: 1100px; height: 650px; top: -320; left: 105; }
</style>


<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: 30px;LEFT: -250px;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:30px;">《好人一生平安》</span>
<span style="color:#3d46f7;"><span style="font-size:22px;"> - - 梦之旅</span></div>
</style>

<div style="position: relative; width: 500px; height: 50px; top:610px;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>



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

      <audio id="aud" src="https://ysj147.s3-us-east-1.ossfiles.com/ltdgs01/0307.mp3" autoplay loop></audio>
</div>

<script>

(function() {
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      let js1 = 'https://ysj147.s3-us-east-1.ossfiles.com/zzsc/js/svg_path_lrc_z_ysj4.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(js1, () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: lrcAr,
                        lrc_css: 'top: 60px; --bg: linear-gradient(rgba(249,214, 43,.25),rgba(249,42,111,.7)); color: snow;left: 80px;',
                        fs_css: 'bottom: 3%; left: 100px; transform: translate(0,-35px); background: transparent; --color: rgba(63,168,211,.95);',
                        player_css: 'width: 195px; height: 247px; top: 56%; left: 14%; background: url("https://ysj147.s3-us-east-1.ossfiles.com/zzsc/gif/xlj2.png") no-repeat center/cover;',

                        path: 'm42.87971,137.18274c0,0 -0.70377,-133.18275 -0.87971,-133.18275c0.17594,0 146.91239,12.2992 146.73645,12.2992c0.17594,0 0.52783,162.70082 0.35189,162.70082c0.17594,0 -112.42757,-5.9739 -112.60351,-5.9739',
                        btn: {left: 44, top: 210},
                        track: {track: '#899dce', prog: '#fb2b70'},

                        img: {play: 'https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/play.png', pause: 'https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/pause.png'}
                });
      });

      loadJs(js2, () => {
                H5lz({
                        papa: '#sky',
                        total: 7,
                        size: {width: 30, height: 62},
                        shape: {background: 'url("https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/8707.png") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toLeft',
                        maxTime: 20,
                        offset: {x: 0, y: 0},
                          
                });
      });
})();

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

亦是金 发表于 2023-10-11 18:33

@小辣椒 这首歌送给你,祝你开心,健康,一生平安!{:4_187:}

红影 发表于 2023-10-11 18:41

这个帖子很温暖,@小辣椒 亲爱的快来收礼{:4_187:}

红影 发表于 2023-10-11 18:41

用头像边框做路径,这个构思很巧。给亦是金老师点赞{:4_199:}

亦是金 发表于 2023-10-11 18:59

红影 发表于 2023-10-11 18:41
这个帖子很温暖,@小辣椒 亲爱的快来收礼

问好红影!谢谢夸奖!{:4_187:}

亦是金 发表于 2023-10-11 19:01

红影 发表于 2023-10-11 18:41
用头像边框做路径,这个构思很巧。给亦是金老师点赞

受到表扬!好开心!有的飘飘然了!{:4_189:}

红影 发表于 2023-10-11 19:02

亦是金 发表于 2023-10-11 19:01
受到表扬!好开心!有的飘飘然了!

边框的颜色也调得很好,很赞{:4_187:}

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

红影 发表于 2023-10-11 19:02
边框的颜色也调得很好,很赞

我把路径的预行走路线的颜色调成和镜框同色,这样感觉较清爽,{:4_205:}

红影 发表于 2023-10-11 19:16

亦是金 发表于 2023-10-11 18:59
问好红影!谢谢夸奖!

问好亦是金老师,这个帖子真好{:4_199:}

红影 发表于 2023-10-11 19:23

亦是金 发表于 2023-10-11 19:15
我把路径的预行走路线的颜色调成和镜框同色,这样感觉较清爽,

是的,这个样感觉特别协调呢{:4_204:}

亦是金 发表于 2023-10-11 20:55

红影 发表于 2023-10-11 19:16
问好亦是金老师,这个帖子真好

谢谢表扬!{:4_187:}

亦是金 发表于 2023-10-11 20:56

红影 发表于 2023-10-11 19:23
是的,这个样感觉特别协调呢

{:4_189:}

红影 发表于 2023-10-11 21:12

亦是金 发表于 2023-10-11 20:55
谢谢表扬!

原来这美丽的海边是动图,前面还以为是视频呢{:4_173:}

红影 发表于 2023-10-11 21:14

亦是金 发表于 2023-10-11 20:56


这个播放器按钮在图片下侧,没和图片重合,很赞{:4_204:}

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

红影 发表于 2023-10-11 21:14
这个播放器按钮在图片下侧,没和图片重合,很赞

我总结上次播放器按钮被路径图片遮挡的情况,这次制作路径图片时将图片下方留出足够的位置了,{:4_205:}

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

红影 发表于 2023-10-11 21:12
原来这美丽的海边是动图,前面还以为是视频呢

使用原来的swf的风景制作成gif的!{:4_189:}

红影 发表于 2023-10-11 21:32

亦是金 发表于 2023-10-11 21:25
我总结上次播放器按钮被路径图片遮挡的情况,这次制作路径图片时将图片下方留出足够的位置了,

想避开图片,只能上下留空档了,左右的话需要的位置太多,而且不好看{:4_173:}

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

亦是金 发表于 2023-10-11 21:27
使用原来的swf的风景制作成gif的!

很漂亮{:4_187:}

醉美水芙蓉 发表于 2023-10-11 21:50

焱鑫磊 发表于 2023-10-11 22:02

欣赏欣赏!{:4_176:}{:4_176:}{:4_176:}
页: [1] 2 3
查看完整版本: 《好人一生平安》 - 梦之旅 TO:小辣椒