css-doodle插件初体验
七娃博客129 次
官方解释: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
评论 | 0 条评论