css-doodle插件初体验
七娃博客932人阅读
官方解释: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>
效果如下:
评论 | 0 条评论
登录之后才可留言,前往登录