乐趣区

关于前端:CSS-奇思妙想-Single-Div-绘图技巧

常常能看到无关 CSS 绘图的文章,譬如应用纯 HTML + CSS 绘制一幅哆啦 A 梦图画。实现的形式就是通过重叠 div,一步一步实现图画中的一块一块。这种技巧自身没有什么问题,然而就是少了一些难度,只须要有急躁,很多图形还是可能被缓缓实现进去的。

基于 CSS 绘图的这个需要,逐步又有了新的一个流派, 单标签实现图形 ,也就是说,一个简单的图形只借由一个标签实现,这个绝对于可能有限应用标签,一直重叠 div 来说,无疑难度回升了很多,也要求对 CSS 有着更粗浅的了解。

譬如上面这个图形,就是由一个 div 元素实现,源自于 A Single Div:

本文就将介绍一些应用单标签绘图的技巧,并且应用这些技巧,借用单个标签去实现一些简单图形~😅

正当利用伪元素

尽管说是一个标签,然而简直所有打着单标签实现图形题目的例子,其中都应用了 3 个元素。这就是单标签实现图形上最为外围的一部分:

咱们除了元素自身的款式可能管制之外,还有元素的两个伪元素 — ::before::after,实际上一共是 3 个元素

好,譬如上面这个心形图形,只能应用一个 div 实现它,该怎么做呢:

这种不规则的图形自身应用纯 CSS 是比较复杂的,通常会借助 SVG,当然在 CSS 中就是应用 clip-path。不过仔细观察图形,咱们不须要 clip-path,尝试将图片分成 3 局部:

Wow,其实这里,咱们只须要元素自身实现正方形,元素的两个伪元素利用相对定位实现两个圆形,叠加在一起即可!残缺的代码也非常简单:

div {
    position: relative;
    transform: rotate(45deg);
    background: rgba(255, 20, 147, 0.85);
    width: 140px;
    height: 140px;
}
div::before,
div::after {
    content: "";
    position: absolute;
    top: 0;
    left: -70px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgb(255, 20, 147);
}
div::before {
    top: -70px;
    left: 0;
}

残缺的示例代码,你能够戳这里 CodePen Demo — A Signle Div heartShape

突变 & 多重突变

毫不夸大的说,突变是在单标签实现图形中,应用的最多的一个 CSS 属性。

起因就在于咱们突变是能够多重突变的 !突变不仅仅只能是单个的 linear-gradient 或者单个的 radial-gradient,对于 background 而言,它是反对多重突变的叠加的,一点十分重要。

好,咱们来看看这个太极图:

其实太极图就是由多个不同色彩的圆组成,这里重叠多个不同的 div,并且把他们组合在一起必定是 OK 的。然而咱们的指标是应用单个标签实现。

当图形全是圆或者线条,就应该思考应用多重线性(径向)突变了,咱们能够将上图拆解一下。

它其实是由 1 个线性突变加上 4 个径向突变生成的圆组成:

所以,一个太极图残缺的代码只须要一个 div 即可,甚至都不须要伪元素的辅助:

div {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: radial-gradient(#000 12.5px, transparent 12.5px),
        radial-gradient(#fff 12.5px, transparent 12.5px),
        radial-gradient(#fff 50px, transparent 50px),
        radial-gradient(#000 50px, transparent 50px),
        linear-gradient(90deg, #000 100px, #fff 100px);
    background-position: center 50px, center -50px, center 50px, center -50px, 0 0;
}

残缺的示例代码,你能够戳这里 CodePen Demo — A Single Div PURE CSS Tai Chi

暗影 & 多重暗影

与突变十分相似的一个属性就是暗影 box-shadowbox-shadow 属性它的一个特点也是能够叠加多层的,能够内置多条暗影规定,它几乎就是单标签绘图的终极大杀器!

咱们尝试应用一个 div 实现如下图形:

乍一看,这个图形其实还是很简单的,云朵、雨滴都不像是仅仅用一个标签或者一个伪元素可能实现的。

实则不然,首先咱们看看这个云朵,尽管带有不规则的轮廓,然而实际上就是一个一个的圆。非常适合应用多重径向突变或者是多重暗影!

其实就是一个实现圆,而后利用暗影实现多个圆的叠加,示例动画,一看就懂:

代码量其实也非常少,实现一个云朵的代码:

div{
  width:100px;
  height:100px;
  background:#fff;
  border-radius:50%;
  box-shadow:
    120px 0px 0 -10px #fff,
    95px 20px 0 0px #fff,
    30px 30px 0 -10px #fff,
    90px -20px 0 0px #fff,
    40px -40px 0 0px #fff;
}

CodePen Demo — A Single Div Cloudy

与云朵的示例代码相似,雨滴其实也是借助了多重暗影实现:

div {
    position: absolute;
    width: 3px;
    height: 6px;
    border-radius: 50%;
    animation: rainy_rain 0.7s infinite linear;
    box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px,
            rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,
            rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,
            rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;
}

@keyframes rainy_rain {
    0% {box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px,
            rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,
            rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,
            rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;
    }
    // 省略局部暗影位移帧动画代码
    ...
    100% {box-shadow: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px,
            rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,
            rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,
            rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;
    }
}

刚刚曾经应用了元素自身和元素的一个伪元素,残余一个伪元素实现底部的暗影圆即可,残缺的 Demo 代码你能够戳这里:A Signle Div Rainy

简略总结一下

到这里,能够简略总结一下,单标签实现图形,尤其是简单图形,很大水平上都是借助了上述的 3 个技巧,也就是:

  • 单标签绘图,其实是应用元素自身和它的两个伪元素 ::before::after
  • 正当应用多重突变叠加
  • 正当应用多重暗影叠加

练习一下

咱们练习一下,应用单个 div 实现上面这个美队盾牌:

有了下面的铺垫,其实多重的圆形应用多重径向突变和多重暗影都是都是能够的,而两头的星星,应用字符或者 clip-path 也能十分轻松的实现:

div {
    position: absolute;
    width: 200px;
    height: 200px;
    background: 
        radial-gradient(
            at center,
            #0033b0 20%,
            #ce0021 20%,
            #ce0021 35%,
            #eee 35%,
            #eee 55%,
            #ce0021 55%
        );
    border-radius: 50%;
}
div::before {
    content: "★";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 47px;
    font-size: 55px;
}

咱们会失去这样一个图形:

感觉图形少了一些光泽,咱们能够往 div 上持续叠加一些 linear-gradient,给盾牌外表增加一些高光:

div {
    position: absolute;
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg,  rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 65%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0) 35%,  rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 65%),
        linear-gradient(to right, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 65%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 65%),
        radial-gradient(
            ellipse at center,
            #0033b0 20%,
            #ce0021 20%,
            #ce0021 35%,
            #eee 35%,
            #eee 55%,
            #ce0021 55%
        );
    border-radius: 50%;
}
div::before {
    content: "★";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 47px;
    font-size: 55px;
}

OK,便能完满的实现:

残缺的代码你能够戳这里:A Signle Div Shield

单个标签实现一个磁带

咱们再看看这个图形,一个磁带图形:

看着很简单,其实都是圆和各种线条,其实也是适宜应用单个标签实现的,就是十分的花工夫,须要精密的管制 background-image 外面的每个突变的 background-sizebackground-position

首先,借由多重突变,实现整个背景构造:

div {
    width: 180px;
    height: 120px;
    border-radius: 5px;
    background-image: linear-gradient(to right, #444 10px, transparent 10px),
        linear-gradient(to left, #444 10px, transparent 10px),
        linear-gradient(135deg, #444 20px, transparent 20px),
        linear-gradient(-135deg, #444 20px, transparent 20px),
        linear-gradient(
            to bottom,
            transparent 35px,
            #be0974 35px,
            #be0974 43px,
            #da6a57 43px,
            #da6a57 51px,
            #eebc31 51px,
            #eebc31 59px,
            #92a25b 59px,
            #92a25b 67px,
            #46a7c0 67px,
            #46a7c0 75px,
            transparent 75px
        ),
        linear-gradient(
            to bottom,
            transparent 10px,
            #f7f7f7 10px,
            #f7f7f7 85px,
            transparent 85px
        ),
        linear-gradient(to top, transparent 26px, #444 26px),
        linear-gradient(
            105deg,
            #444 70px,
            #333 70px,
            #333 73px,
            transparent 73px
        ),
        linear-gradient(
            -105deg,
            #444 70px,
            #333 70px,
            #333 73px,
            transparent 73px
        ),
        linear-gradient(to top, #444 24px, #777 24px, #777 26px, #444 26px);
    box-shadow: -4px -4px 2px rgb(0 0 0 / 20%);
}

失去如下图形:

通过其中一个伪元素,利用 box-shadow 实现磁带上的各个圆圈点:

div:after {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    background: #999;
    border-radius: 50%;
    box-shadow: 165px 0 0 #999, 0 104px 0 #999, 165px 104px 0 #999, 55px 101px 0 1px #222, 68px 98px 0 1px #222, 98px 98px 0 1px #222, 110px 101px 0 1px #222, 51px 38px 0 #444, 114px 38px 0 #444, 44px 46px 0 #444, 58px 46px 0 #444, 107px 46px 0 #444, 121px 46px 0 #444, 51px 53px 0 #444, 114px 53px 0 #444, 51px 46px 0 6px #ccc, 114px 46px 0 6px #ccc;
    left: 5px;
    top: 5px;
}

最初剩下的一个伪元素,实现磁带两头的局部款式即可:

div:before {
    position: absolute;
    content: "";
    width: 90px;
    height: 26px;
    margin-left: -45px;
    left: 50%;
    top: 41px;
    background-color: #ccc;
    background-image: linear-gradient(to bottom, #444 5px, transparent 5px),
        linear-gradient(to top, #444 5px, transparent 5px),
        linear-gradient(to right, #444 30px, transparent 30px),
        linear-gradient(to left, #444 30px, transparent 30px),
        radial-gradient(circle at 10px 12px, #a0522d 32px, transparent 32px);
    border-radius: 30px;
}

这样,就顺利应用单个标签实现啦,该 Demo 取自 A Single Div,残缺的代码你能够戳这里:CodePen Demo — A single Div Disk。

当然,单标签能实现的远不止如此,看看上面这些,都是一个 div 可能实现的:

配合其它高阶属性

当然,上述的作图都还是比拟惯例的,借助伪元素,应用 background、应用 box-shadow。咱们还能够尝试在一个 div 内减少混合模式 mix-blend-mode、滤镜 filter 以及 遮罩 mask 等,实现一些更为有意思的成果。

譬如下述这个成果,应用了一个 div 实现的幽灵成果:

在用一个 div 实现根本成果之余,还加上了利用了 filter 滤镜实现了一些交融成果。

残缺的代码你能够戳这里:CodePen Demo — A Single Div Ghost

最初

只应用 CSS 进行单 div 绘图还是十分有意思的,也能够比拟好的锤炼 CSS,尽管业务中不肯定会用上:)

这里再举荐几个单标签绘图的网站,你能够看看再模拟模拟:

  • A Single Div
  • MagicCSS
  • CodePen – Single Div

好了,本文到此结束,心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯,千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS,继续更新,欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。

退出移动版