Humanity

马黑黑

马黑黑

<style>
#tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 700px; background: linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.35)), url('https://638183.freep.cn/638183/t24/4/huma.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #333; z-index: 1; position: relative; }
#tz::after { position: absolute; inset: 0; content: ''; background: url('https://638183.freep.cn/638183/web/svg/updwonballs.svg') no-repeat center/cover; opacity: var(--opacity); transition: 1.5s; pointer-events: none; }
#player { position: absolute; left: 60px; top: 60px; width: 200px; height: 200px; cursor: pointer; transition: .6s; opacity: .8; animation: rot 8s linear infinite var(--state); }
#player:hover { filter: invert(100%) drop-shadow(0 0 4px #333); }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tz">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1454830983" autoplay loop></audio>
	<img id="player" src="https://638183.freep.cn/638183/web/svg/yuan.svg" alt="" title="播放/暂停" />
</div>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/fscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({
	papa: '#tz',
	scale: [player],
	css: 'left: 50%; bottom: 20px; transform: translate(-50%); --bg: transparent; --color: lightblue',
});
mState = () => {
	tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
	tz.style.setProperty('--opacity', aud.paused ? '0' : '1');
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

梦江南

老师早上好！这个播放器太漂亮了，像3D做出来一样。

红影

原来小播和粒子效果都是svg图片啊，这个两个图片效果漂亮，而且svg图片便于修改。
这个帖子好

红影

这个还特地把背景弄暗了点，让粒子效果和小播效果更突出呢。
欣赏黑黑好帖

马黑黑

梦江南 发表于 2024-9-20 08:06
老师早上好！这个播放器太漂亮了，像3D做出来一样。

这是svg做的，用一个渐变给圆上色，再用写线条装饰一下

马黑黑

红影 发表于 2024-9-20 10:39
原来小播和粒子效果都是svg图片啊，这个两个图片效果漂亮，而且svg图片便于修改。
这个帖子好

粒子方面，用JS做一个模板，这样改一下数据就可以得到不同的效果。模板我还在研究中，看看能不能做到更灵活。

小播图片简单的：svg里使用渐变给圆上色，加一些线条之类的装饰一下就行

梦江南

马黑黑 发表于 2024-9-20 11:56
这是svg做的，用一个渐变给圆上色，再用写线条装饰一下

代码神奇，还是老师厉害。

红影

马黑黑 发表于 2024-9-20 11:59
粒子方面，用JS做一个模板，这样改一下数据就可以得到不同的效果。模板我还在研究中，看看能不能做到更灵 ...

黑黑把svg的研究越弄越精彩呢

小辣椒

这个也是彩色粒子效果，黑黑背景图选的漂亮

小辣椒

黑黑这个粒子.svg自己可以修改大小吗

马黑黑

小辣椒 发表于 2024-9-20 18:05
黑黑这个粒子.svg自己可以修改大小吗

可以：修改源码。不过那么多粒子，手动修改比较麻烦额

马黑黑

梦江南 发表于 2024-9-20 13:42
代码神奇，还是老师厉害。

马黑黑

小辣椒 发表于 2024-9-20 18:02
这个也是彩色粒子效果，黑黑背景图选的漂亮

马黑黑

红影 发表于 2024-9-20 14:19
黑黑把svg的研究越弄越精彩呢

svg的知识体系，除了滤镜，其他都相对容易，学一下就会

红影

马黑黑 发表于 2024-9-20 19:46
svg的知识体系，除了滤镜，其他都相对容易，学一下就会

记得以前学过的功能里有个涉及的单词特别长又多的，就是svg的滤镜吧

绿叶清舟

这个象把雨伞了

马黑黑

绿叶清舟 发表于 2024-9-20 20:44
这个象把雨伞了

雨伞可不是酱紫的

马黑黑

红影 发表于 2024-9-20 20:42
记得以前学过的功能里有个涉及的单词特别长又多的，就是svg的滤镜吧

是的

花飞飞

每天看贴都惊叹于白老师的各种创意。。。那啥，金点子真多。。