整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS作图(二),纯CSS代码画出精致逼真的图像,学起来啊

SS的强大和精妙,只有在认真研读其代码之后才会深刻明白。

今日继续用纯CSS画图,并给大家整理了本文中所有代码,需要的小伙伴可以私信我哦。

一、阴阳

首先,用CSS画一个阴阳图,如下:

代码也很简单:

#yin-yang {
 width: 96px;
 height: 48px;
 background: #eee;
 border-color: red;
 border-style: solid;
 border-width: 2px 2px 50px 2px;
 border-radius: 100%;
 position: relative;
}
 
#yin-yang:before {
 content: "";
 position: absolute;
 top: 50%;
 left: 0;
 background: #eee;
 border: 18px solid red;
 border-radius: 100%;
 width: 12px;
 height: 12px;
}
 
#yin-yang:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 background: red;
 border: 18px solid #eee;
 border-radius:100%;
 width: 12px;
 height: 12px;
}

当然,颜色什么的,可以随便改啦~

二、鸡蛋

再画一个可爱的鸡蛋~~~像这样:

代码仅仅几句话:

#egg {
 display:block;
 width: 126px;
 height: 180px;
 background-color: red;
 -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
 border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

三、最后画一个弯弯的月亮~

长这样:

代码非常非常少:

#moon {

width: 80px;

height: 80px;

border-radius: 50%;

box-shadow: 15px 15px 0 0 red;

}

是不是很神奇?不敢相信这几句代码居然有这样的功力?

那就打开电脑,按照我之前讲的方法创建一个html试试吧~

不知道怎么创建的小伙伴看这里>>css3制作图形大全:简单几句代码画出漂亮的图形,一起来看看吧~

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

什么是css-doodle

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

<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本身的限制。

展示

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

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

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

谢谢大家一直以来的支持。学习更多CSS知识,点击下方专栏吧!

SS全称“Cascading Style Sheet”,它的意思是“层叠样式表”或“级联样式表”,CSS盒子模型是在网页设计中用到的CSS技术中引用的一种思维模型。CSS盒子模型由内容区、填充、边框、空白边组成。

CSS盒子模型常见用途

由于CSS盒子模型是CSS中的一个重要概念,每一个元素都可以当作一个矩形的盒子,这个矩形盒子可以描述元素所占空间内容。CSS盒子模型更方便了设计者对网页设计的整体把控。

CSS盒子模型绘制方法

用亿图图示绘制CSS盒子模型十分简单,只需要找到指定模板即可,新手参考以下几个步骤即可完成CSS盒子模型的绘制。

第一步:下载“亿图图示”软件,启动软件界面,登录账号开始操作。

第二步:点击搜索框输入“CSS盒子模型”,寻找符合设计要求的CSS盒子模型模板,点击“使用”打开CSS盒子模型模板。

第三步:点击操作区的CSS盒子模型,根据自己的需要,在模板上修改各层次的注释,在上方操作区更改字体为黑体,并更改字体大小。

第四步:双击CSS盒子模型中的“文本”方框,即可输入CSS盒子模型中的文本,右侧填充可以修改填充色、边框颜色。

第五步:完成CSS盒子模型制作之后,点击左上角的“保存”等按钮,本次选择保存为让图片格式,修改好分辨率等参数之后,CSS盒子模型就可以存储在电脑中。

以上就是CSS盒子模型绘制方法的相关介绍。

CSS盒子模型绘制软件——亿图图示

当有绘制CSS盒子模型的需求时,选择亿图图示这款国产矢量绘图软件,让用户绘图事半功倍。
亿图图示是一款与众不同的矢量绘图软件,它采用了与其他绘图软件完全不同的思维模式设计开发,在满足了用户基本的绘图需求基础上,开发了模板套用功能,让绘图的效率提高许多,同时,在云存储的加持下,亿图图示用户可以随时随地绘制作品。
使用亿图图示绘制CSS盒子模型,直接套用一个模板,在原有基础上修改、添加需要的元素,提升绘图效率。

为什么选择亿图图示绘制CSS盒子模型?

1、可靠软件,值得信赖:亿图图示经过了九个大版本的升级,软件可靠程度大幅增加,现在已经拥有超过900万用户,庞大的使用群体是亿图图示经受住市场优胜劣汰的体现。
2、软件资源库强大,满足绘图需求:亿图图示拥有数量庞大的矢量符号库和模板库,当用户绘图时可以很轻松的找到自己需要的符号,即使符号很特殊在库中找不到,用户也可以自行绘制或者导入本地符号图形、从库外调用。
3、先用后付,性价比高:亿图图示为新用户谋福利,凡是新注册的亿图图示账户,均可长期使用免费基础版本。当有高级需求的时候,可以再升级购买会员版。