失序者

马黑黑 发表于 2023-10-9 07:36

马黑黑 发表于 2023-10-9 07:39

帖子代码
<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/3/wuxu.jpg') 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: url('https://638183.freep.cn/638183/t23/gif/bbb.gif'); bottom: 0; mix-blend-mode: screen;}
#sky { position: absolute; width: 100%; height: 20%; top: 0; }
#papa > svg { stroke-linecap: round; }
</style>

<div id="papa">
<div id="sky"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2087973934" autoplay loop></audio>
</div>

<script>

(function() {
let lrcAr = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.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: 20px;',
fs_css: 'bottom: 130px; background: transparent;',
player_css: 'width: 240px; height: 80px; bottom: 20px;',
path: 'M10 5 C10 90, 230 90 ,230 5',
btn: {left: 54, top: 28},
track: {track: '#666', prog: '#eee'},
img: {play: '', pause: ''}
});
});

loadJs(js2, () => {
H5lz({
papa: '#sky',
total: 40,
size: {width: 6, height: 6},
shape: {background: '', borderRadius: ''},
ani: 'toLeft',
maxTime: 30,
offset: {x: 0, y: 0},
});
});
})();

</script>
自由路径进度条使用规整的三次贝塞尔曲线做成，路径线条的两端呈圆形，这不是插件预设的，是通过CSS设定的线帽属性：

#papa > svg { stroke-linecap: round; }

stroke-linecap 线帽，round 圆形。除了圆形，线帽还有一个方形，square。

小文发表于 2023-10-9 08:09

有性格，问好先生，我喜欢！

红影发表于 2023-10-9 09:14

播放器按钮上面的那个动态幽灵为什么是鼠标感应的，看半天没看出来控制它的语句啊{:4_203:}

红影发表于 2023-10-9 09:21

哈哈，还跑插件里折腾半天，原来这个小动图本来就是变形的，正好我鼠标移上去了，还以为是鼠标控制的呢{:4_173:}

红影发表于 2023-10-9 09:24

还是这个小动图，在伪元素里使用 content 插入它，都不用定位就在按钮上方？
这个又有点迷糊。哈哈，这个小动图里的机关不少啊{:4_173:}

红影发表于 2023-10-9 09:26

这个制作有意思，用这么多妖魔鬼怪来配合这首歌，很奇妙{:4_173:}

红影发表于 2023-10-9 09:27

那些彩色粒子只在图片上方飘动也很漂亮。欣赏黑黑好帖{:4_199:}

红影发表于 2023-10-9 11:00

马黑黑发表于 2023-10-9 07:39
帖子代码
自由路径进度条使用规整的三次贝塞尔曲线做成，路径线条的两端呈圆形，这不是插件预设的，是通过 ...

stroke-linecap 线帽，这个也是新知识呢{:4_187:}

马黑黑 发表于 2023-10-9 11:56

红影发表于 2023-10-9 11:00
stroke-linecap 线帽，这个也是新知识呢

以前讲过的

醉美水芙蓉 发表于 2023-10-9 11:58

马黑黑 发表于 2023-10-9 11:59

醉美水芙蓉发表于 2023-10-9 11:58
那只小精灵挺不错的哦！

还好

马黑黑 发表于 2023-10-9 11:59

小文发表于 2023-10-9 08:09
有性格，问好先生，我喜欢！

中午好

马黑黑 发表于 2023-10-9 12:00

红影发表于 2023-10-9 09:27
那些彩色粒子只在图片上方飘动也很漂亮。欣赏黑黑好帖

可以通过给它们指定父元素，然后安排父元素的位置

马黑黑 发表于 2023-10-9 12:00

红影发表于 2023-10-9 09:26
这个制作有意思，用这么多妖魔鬼怪来配合这首歌，很奇妙

{:4_196:}

马黑黑 发表于 2023-10-9 12:00

红影发表于 2023-10-9 09:14
播放器按钮上面的那个动态幽灵为什么是鼠标感应的，看半天没看出来控制它的语句啊

并没有对它进行任何控制

小辣椒 发表于 2023-10-9 13:04

哇塞~~~背景图图的精灵啊，我以为是鬼灵了怕怕的

小辣椒 发表于 2023-10-9 13:05

黑黑又一个新的播放器分享，辛苦了{:4_187:}

马黑黑 发表于 2023-10-9 13:13

小辣椒发表于 2023-10-9 13:04
哇塞~~~背景图图的精灵啊，我以为是鬼灵了怕怕的

{:4_172:}

马黑黑 发表于 2023-10-9 13:13

小辣椒发表于 2023-10-9 13:05
黑黑又一个新的播放器分享，辛苦了

不是呀，这个还是那个自由路径插件

页: [1] 2 3 4 5 6 7 8 9 10

花潮论坛's Archiver

失序者