炫酷的CSS 作图web组件 - css-doodle

今天不写代码，就看看人家是如何写代码的。

什么是css-doodle

官方地址： https://css-doodle.com/

<css-doodle />是一个Web组件。其基于Shadow DOM V1和Custom Elements V1来构建的。该组件可以帮助轻松的使用Custom Elements、Shadow DOM和CSS Grid创建任何你想要的图案（CSS 图案）。创建出来的图案你可以运用于Web页面中。

当你看到Custom Elements、Shadow DOM和CSS Grid的时候，一定很担忧兼容问题。事实上你的担忧是正常的，因为该组件到目前为止只在最新的Chrome和Safari浏览器上可以正常的运行。

简单点说：

该组件通过其内部的规则（纯CSS）会生成一系列的div构建的CSS Grid。你可以使用CSS轻松地操作这些div（单元格，每个div就是一个单元格）来生成图案。生成的图案既可以是静态的，也可以是动态的。而其限制仅限于CSS本身的限制。

展示

这么复杂的图形，你以为需要很长的代码？

no,no,no！非常简单，上图右侧就是它对应的代码。不过，你需要先引入这个插件。

上手

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.3.0/css-doodle.min.js"></script>

or

npm install css-doodle

import 'css-doodle';

接下来你就可以在你的页面写<css-doodle>标签了。css-doodle会根据你定义的代码，生成dom元素，先展示你要的图形。

下图就是css-doodle生成的dom元素，和样式。

酷炫效果

:doodle {    
  @grid: 126x1 / 650px;    
  @shape: drop;    
  background:  
    @m2(radial-gradient(#fff 50%, transparent calc(50% + 1px))
    @pn(200px 478px, 192px 469px) / @pn(80px 32px, 64px 32px)no-repeat),
    linear-gradient(10deg, #fff 26.5%, transparent calc(26.5% + 1px)),
    linear-gradient(205deg, #5256bd 56%, #954ccc);
}
offset-path: path('M @r650 600 Q @calc(@lr + @p(@r(-300, -20), @r(20, 300), @r(±300))) @r650 @lr5 0  ');  
position: absolute;  
will-change: offset-distance;  
animation: move @r(12s, 30s) infinite linear;  
animation-delay: -@r(25s);
@keyframes move {
  0% {
    offset-distance: 100% 
  }    
  20%, 80% { 
    opacity: 1 
  }
  100% { 
    offset-distance: 0 opacity: 0 
  }
}  
:after,:before {
  color: transparent;
  text-shadow: 0 0 0 #fff;
}  
:after {    
  content: @p([❉❄❅❆...❄️]);
  font-size: @r(5px, 15px);
}
@nth(4-n) {    
  animation: none;
  offset-path: none;
  left: @pn(352px, 372px, 416px, 156px);
  top: @pn(416px, 437px, 460px, 434px);
  transform: 
    @pn(scaleY(4), scaleX(.75) scaleY(1.55), none, scaleY(1.5));
}  
@nth(3-n) {
  :after {
    content: '?';
    font-size: 80px;
  }
}  
@nth(1) {    
  filter: blur(28px);  
}  
@nth(4) {    
  :after {
    content: '?';
    font-size: 48px;
  }
}

结语

看到这里，是不是觉得CSS非常6。随着前端技术不断的革新，CSS能做的事已经非常的多了，只有不断的学习，才能跟进技术时代的步伐。

关注我，学习更多编程知识哦，不仅仅是前端！

小伙伴们，有问题可以评论区留言哦，欢迎大家点评。

谢谢大家一直以来的支持。