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 作图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盒子模型,直接套用一个模板,在原有基础上修改、添加需要的元素,提升绘图效率。
1、可靠软件,值得信赖:亿图图示经过了九个大版本的升级,软件可靠程度大幅增加,现在已经拥有超过900万用户,庞大的使用群体是亿图图示经受住市场优胜劣汰的体现。
2、软件资源库强大,满足绘图需求:亿图图示拥有数量庞大的矢量符号库和模板库,当用户绘图时可以很轻松的找到自己需要的符号,即使符号很特殊在库中找不到,用户也可以自行绘制或者导入本地符号图形、从库外调用。
3、先用后付,性价比高:亿图图示为新用户谋福利,凡是新注册的亿图图示账户,均可长期使用免费基础版本。当有高级需求的时候,可以再升级购买会员版。
*请认真填写需求信息,我们会在24小时内与您取得联系。