秋日私语

马黑黑

马黑黑

帖子代码

<style>
#papa {
	margin: 30px 0 30px calc(50% - 593px);
	display: grid;
	place-items: center;
	width: 1024px;
	height: 570px;
	background: url('https://638183.freep.cn/638183/t24/webp2/qrsy.webp') no-repeat center/cover;
	box-shadow: 0 0 8px #333;
	overflow: hidden;
	position: relative;
}
li-zi {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: snow;
	box-shadow: 100px 0 0 plum, 0 50px 0 lightyellow;
}
#player {
	position: absolute;
	width: 60px;
	height: 60px;
	filter: drop-shadow(0 0 1px darkgreen);
	cursor: pointer;
	animation: rot 8s linear infinite var(--state);
}
.leaf {
	position: absolute;
	left: -50%;
	top: -50%;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, yellow, darkgreen);
	border-radius: 100% 50%;
	opacity: .95;
	transform-origin: 100% 100%;
	transform: rotate(var(--deg)) translateY(60px);
}

@keyframes moving {
	from { opacity: 0; transform: ratate(0) translate(0,0) scale(0.2); }
	to { opacity: 1; transform: rotate(60deg) translate(var(--x0),var(--y0)) scale(1.5); }
}
@keyframes rot { to { transform: rotate(360deg); } };
</style>

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

<script>
mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');

Array(total=5).fill('').forEach((i,k) => {
	i = document.createElement('span');
	i.className = 'leaf';
	i.style.cssText += `--deg: ${360/total * k}deg;`;
	player.appendChild(i);
});

for(var i = 0, all = 80; i < all; i++) {
	let lz = document.createElement('li-zi');
	let hudu = Math.PI / 180 * 360 / all * i;
	let xx = 800 * Math.cos(hudu), yy = 600 * Math.sin(hudu), size = Math.ceil(Math.random() * 5 + 5);
	lz.style.cssText += `
		--x0: ${xx}px;
		--y0: ${yy}px;
		width: ${size}px;
		height: ${size}px;
		animation: moving ${Math.random() * 5 + 5}s -${Math.random() * 10}s linear infinite var(--state);
	`;
	papa.prepend(lz);
}

aud.onplaying = aud.onpause = () => mState();

player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

彩云归

欣赏佳作，谢谢分享！

马黑黑

彩云归 发表于 2024-9-3 19:22
欣赏佳作，谢谢分享！

晚上好

马黑黑

醉美水芙蓉 发表于 2024-9-3 19:52
欣赏老师精彩播放器！绿色叶子漂亮！

绿黄渐变加一点点透明度

起个网名好难

                               
登录/注册后可看大图

起个网名好难

马黑黑 发表于 2024-9-3 18:18
帖子代码

<style>

li-zi 本质上是个 div ， 用作类也可以吧

马黑黑

起个网名好难 发表于 2024-9-3 20:23
li-zi 本质上是个 div ， 用作类也可以吧

当然可以。所有自定义标签，默认以div为蓝本。

花飞飞

这个作品漂亮，眉清目秀的。。

花飞飞

中间那朵花有点面熟，似乎是之前叶片组合起来的那串。

花飞飞

粒子随机色怎么年轻了许多，很轻盈的色彩。。

马黑黑

花飞飞 发表于 2024-9-3 20:32
粒子随机色怎么年轻了许多，很轻盈的色彩。。

粒子没有用随机色，是预设的三种颜色：一种是粒子自身，另外两种是粒子阴影

马黑黑

花飞飞 发表于 2024-9-3 20:30
这个作品漂亮，眉清目秀的。。

总而言之：长的简单是在而靠谱不脱离现实

花飞飞

马黑黑 发表于 2024-9-3 20:34
粒子没有用随机色，是预设的三种颜色：一种是粒子自身，另外两种是粒子阴影

刚看了代码，阴影有两种
，一种紫色一种黄色。。本身是白色。。
难怪这么飘逸。。

马黑黑

花飞飞 发表于 2024-9-3 20:38
刚看了代码，阴影有两种
，一种紫色一种黄色。。本身是白色。。
难怪这么飘逸。。

还可以加一些，不过不要贪心，阴影的渲染也是消耗资源的

花飞飞

马黑黑 发表于 2024-9-3 20:35
总而言之：长的简单是在而靠谱不脱离现实

自然而然，大道至简，纯天然。。
怎么看都靠得住，不会忍饥挨饿的。。

花飞飞

马黑黑 发表于 2024-9-3 20:39
还可以加一些，不过不要贪心，阴影的渲染也是消耗资源的

有80，这么算来240，够够的了。。三百以内都还好吧

四海八荒

欣赏佳作，经典音乐，非常喜欢。能让人心灵安静。

马黑黑

四海八荒 发表于 2024-9-3 20:46
欣赏佳作，经典音乐，非常喜欢。能让人心灵安静。

晚上好