CSS

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

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

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

什么是css-doodle

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

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

<css-doodle />是一个Web组件。其基于Shadow DOM V1Custom 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本身的限制。

展示

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

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

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

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

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

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

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元素,和样式。

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

酷炫效果

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

: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能做的事已经非常的多了,只有不断的学习,才能跟进技术时代的步伐。

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

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

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

(52)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注