World IN Dream

马黑黑

马黑黑

帖子代码

<style>
#mydiv {
	margin: 130px 0 30px calc(50% - 593px);
	width: 1024px;
	height: 640px;
	background: url('https://638183.freep.cn/638183/t24/2/fj01.jpg') no-repeat center/cover;
	box-shadow: 2px 3px 6px rgba(0,0,0,.6);
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
	position: relative;
}
#mydiv::before, #mydiv::after { position: absolute; content: ''; }
#mydiv::after {
	left: calc(50% - 60px);
	top: 20px;
	width: 120px;
	height: 120px;
	background: url('https://638183.freep.cn/638183/small/snow.webp') no-repeat center/cover;
	pointer-events: auto;
	cursor: pointer;
	animation: rot 8s linear infinite var(--state);
}
#mydiv::before {
	bottom: 120px;
	content: url('https://638183.freep.cn/638183/small/boat.gif');
	-webkit-mask: radial-gradient(circle, red,transparent);
	opacity: .9;
}
li-zi {
	position: absolute;
	left: calc(50% - 5px);
	bottom: 0;
	width: 10px;
	height: 10px;
	border-radius: 0 60%;
	box-shadow: inset 0 0 10px yellow;
	animation: fly 6s linear infinite var(--state);
}
@keyframes fly { to { transform: translate(var(--xx), var(--yy)) rotate(var(--deg)); } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

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

<script>
Array.from({length: 100}).forEach(lz => {
	lz = document.createElement('li-zi');
	var idx = Math.random() > 0.5 ? 1 : -1;
	lz.style.cssText += `
		background: #${Math.random().toString(16).substring(2,8)};
		animation-delay: -${Math.floor(Math.random() * 6)}s;
		--xx: ${idx * Math.random() * 1000}px;
		--yy: ${Math.random() * -800}px;
		--deg: ${Math.random() * 720}deg;
	`;
	mydiv.appendChild(lz);
});
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

南无月

来看看有没有新的说明。
@keyframes fly { to { transform: translate(var(--xx), var(--yy)) rotate(var(--deg)); } }
这个粒子飞得方向不同。
水平1000，上下800，正负值可改方向

南无月

var idx = Math.random() > 0.5? 1 : -1;
这个结构跟控制播放和暂停的样子有点像，又跟改变方向的有点像。。

瞎猜一下，一半向左一半向右？合起来刚好左右两半。。

南无月

小船会动，看了下是张GIF图片，用径向渐变模糊边缘，有羽化效果。。

南无月

粒子的颜色及裁的形状跟草丛几乎一样，浑然一体
整贴色彩清爽，灵动透彻。。
迸发的粒子如喷泉一般，飞向各处，这个世界的确很梦幻
为白老师超凡的创意点赞。。

马黑黑

南无月 发表于 2024-7-30 19:35
粒子的颜色及裁的形状跟草丛几乎一样，浑然一体
整贴色彩清爽，灵动透彻。。
迸发的粒子如喷泉一般，飞向 ...

这是多拖地板就能做出来的

马黑黑

南无月 发表于 2024-7-30 19:33
小船会动，看了下是张GIF图片，用径向渐变模糊边缘，有羽化效果。。

PS学的透

马黑黑

南无月 发表于 2024-7-30 19:31
var idx = Math.random() > 0.5? 1 : -1;
这个结构跟控制播放和暂停的样子有点像，又跟改变方向的有点像。 ...

猜对了。Math.random()得到 0~0.999... 的浮点数，如果它大于0.5，idx等于 1，否则等于 -1，然后它将乘上一定的数，结果是正负两种都有，那样纸，基于X坐标，非左即右，若基于Y坐标，非上即下。

马黑黑

南无月 发表于 2024-7-30 19:29
来看看有没有新的说明。
@keyframes fly { to { transform: translate(var(--xx), var(--yy)) rotate(var( ...

解读正确。不加以说明就是 想逼一下大家去想一想实现的细节。

红影

用mask把小船融合得那么无痕，漂亮

红影

向两边飘飞的叶子，真漂亮。box-shadow: inset 0 0 10px yellow;这个前面的帖子讲过，无论怎样变色，都是基于yellow，既可以让叶子有不同颜色，又不会出现不想要的颜色

红影

var idx = Math.random() > 0.5 ? 1 : -1;
如果是小于，也能分成一半一半吧

红影

黑黑厉害，又是一个新的代码效果呢

马黑黑

红影 发表于 2024-7-30 20:53
黑黑厉害，又是一个新的代码效果呢

这个简简单单的

马黑黑

红影 发表于 2024-7-30 20:53
var idx = Math.random() > 0.5 ? 1 : -1;
如果是小于，也能分成一半一半吧

要的是 1 或 -1

红影

马黑黑 发表于 2024-7-30 21:13
这个简简单单的

但设计得很美

红影

马黑黑 发表于 2024-7-30 21:13
要的是 1 或 -1

问题是在一半的地方进行划分，这个设计很巧妙

马黑黑

红影 发表于 2024-7-30 22:04
问题是在一半的地方进行划分，这个设计很巧妙

这是权重问题，你设为0.3的话，就有所偏颇

马黑黑

红影 发表于 2024-7-30 22:04
但设计得很美

简单的东东设计得美很容易的，比如镁铝穿衣服，穿的越少越好。这谁不会？