官方解释:css-doodle组件将根据其内部的规则(纯CSS)生成一个div网格。您可以使用CSS轻松操纵这些单元格以提供图形模式或动画图形

插件官网:https://css-doodle.com/

实现特效:

使用方法同jquery引入一样——建议放置页面底部:<script src="https://unpkg.com/css-doodle@0.8.5/css-doodle.min.js"></script>

body里面添加代码<css-doodle >代码</css-doodle>

例如:

<css-doodle grid="4x28">
	 :doodle {
	    @size: 20em;
grid-gap: 15px;
	 }
	
	transition: all .4s ease;		
	border-top: 1px solid hsl(@rand(137.50deg, 360deg), 80%, 80%);
	border-right: 1px solid hsl(@rand(137.50deg, 360deg), 80%, 80%);

	:after {
		content: \@hex(@rand(9632, 9687));
		color: hsl(@rand(137.50deg, 360deg), 80%, 80%);
	}
	
	@random {
		border-top: 1px solid transparent;
		border-right: 1px solid transparent;
		border-bottom: 1px solid hsl(@rand(137.50deg, 360deg), 80%, 80%);
		border-left: 1px solid hsl(@rand(137.50deg, 360deg), 80%, 80%);
		border-style: dashed;
	}
</css-doodle>

效果如下:

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
转载请注明来源:css-doodle插件初体验 - Qui-Note