css-doodle ：落花缤纷

马黑黑

实现方法：建立一定数量单元格的 css-doodle 网格，令各单元格以伪元素呈现花朵字符；所有单元格以改变 top 属性实现自上而下掉落效果，下落过程旋转一圈到两圈之间，不断循环。代码如下——

<css-doodle grid="16" click-to-update>
	:doodle {
		@size: 760px 500px;
		background: #333;
	}
	position: absolute;
	left: @r(100)%;
	top: -20%;
	:after {
		position: absolute;
		content: '@p(✿,❁,❀,💮,🌺)';
		color: snow;
		font-size: @r(10, 40)px;
	}
	animation: fall @r(6,20)s @r(-6, 6)s infinite;
	@keyframes fall {
		0% { top: -20%; transform: rotate(0deg); }
		100% {top: 120%; transform: rotate(@p(360, 720)deg); }
	}
</css-doodle>

运行代码

其中的技巧，值得一提的是运行关键帧动画属性 animation 的赋值，各单元格的运行周期时长从 6 秒到 20 秒之间随机获得，运行延时从 -6秒 到 6 秒之间随机选取，如此，css-doodle 已开始运行就会有落花在途中，且落花错落有致，整个画面及其后续变化都很自然。

马黑黑

南无月 发表于 2023-5-14 10:36
目前看的都只能从上往下落，无底洞没法停啊

animation属性你去查查

小辣椒

这个运行代码点击后，出来一片五彩缤纷的效果

马黑黑

小辣椒 发表于 2023-5-9 20:31
这个运行代码点击后，出来一片五彩缤纷的效果

好看不

小辣椒

而且我手机也是秒看见，刚才那谁的我刷新无数次才看见的

小辣椒

马黑黑 发表于 2023-5-9 20:32
好看不

非常好看，就不知道为什么有的手机会看不见

马黑黑

小辣椒 发表于 2023-5-9 20:33
非常好看，就不知道为什么有的手机会看不见

也许是手机网速不稳定？

小辣椒

而且现在的效果这么多我一下子就打开了

马黑黑

小辣椒 发表于 2023-5-9 20:34
而且现在的效果这么多我一下子就打开了

这是后续打开：帖子打开时，css-doodle效果没有运行，点击按钮之后才运行

马黑黑

小辣椒 发表于 2023-5-9 20:33
非常好看，就不知道为什么有的手机会看不见

不是手机看不见，是手机的浏览器不行

小辣椒

马黑黑 发表于 2023-5-9 20:34
也许是手机网速不稳定？

同样的网速，看你现在的我秒开，刚才那谁的我看不见，后来刷新刷新再刷新看见了，赶紧修改了回复

马黑黑

小辣椒 发表于 2023-5-9 20:36
同样的网速，看你现在的我秒开，刚才那谁的我看不见，后来刷新刷新再刷新看见了，赶紧修改了回复

额，可能是代码运行的东东太多

小辣椒

马黑黑 发表于 2023-5-9 20:36
不是手机看不见，是手机的浏览器不行

同样的浏览器，同样的手机

小辣椒

马黑黑 发表于 2023-5-9 20:35
这是后续打开：帖子打开时，css-doodle效果没有运行，点击按钮之后才运行

帖子一片代码我看不见播放器，怎么点击？

马黑黑

小辣椒 发表于 2023-5-9 20:38
帖子一片代码我看不见播放器，怎么点击？

我这个不是有运行代码按钮吗

马黑黑

小辣椒 发表于 2023-5-9 20:37
同样的浏览器，同样的手机

这不可能，如果网速正常的话

小辣椒

马黑黑 发表于 2023-5-9 20:37
额，可能是代码运行的东东太多

应该不是，就一个图，一个音乐

马黑黑

小辣椒 发表于 2023-5-9 20:40
应该不是，就一个图，一个音乐

图片所在服务器不好也会导致帖子打开困难

小辣椒

马黑黑 发表于 2023-5-9 20:39
我这个不是有运行代码按钮吗

就在说你这个我秒开，刚才是朵拉那个帖，我一直看不见，刷新无数次最后看见啦，看见效果了前面的回帖赶紧去修改了

小辣椒

马黑黑 发表于 2023-5-9 20:39
这不可能，如果网速正常的话

就我现在啊，我是手机，而且想速度快，还用了WiFi

小辣椒

马黑黑 发表于 2023-5-9 20:41
图片所在服务器不好也会导致帖子打开困难

哦，这个也是有可能的