咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 699|回复: 1

[CSS] CSS中Single Div 绘图技巧的实现

[复制链接]
  • TA的每日心情
    无聊
    2019-5-27 08:20
  • 签到天数: 4 天

    [LV.2]圆转纯熟

    发表于 2022-1-5 14:52:02 | 显示全部楼层 |阅读模式
    经常能看到有关 CSS 绘图的文章,譬如使用纯 HTML + CSS 绘制一幅哆啦 A 梦图画。实现的方式就是通过堆叠 div,一步一步实现图画中的一块一块。这种技巧本身没有什么问题,但是就是少了一些难度,只需要有耐心,很多图形还是能够被慢慢实现出来的。
    基于 CSS 绘图的这个需求,逐渐又有了新的一个流派,单标签实现图形,也就是说,一个复杂的图形只借由一个标签完成,这个相对于能够无限使用标签,不断堆叠 div 来说,无疑难度上升了很多,也要求对 CSS 有着更深刻的理解。
    譬如下面这个图形,就是由一个 div 元素完成,源自于 A Single Div:
    CSS中Single Div 绘图技巧的实现-1.png

    本文就将介绍一些使用单标签绘图的技巧,并且使用这些技巧,借用单个标签去实现一些复杂图形~
    合理利用伪元素

    虽然说是一个标签,但是几乎所有打着单标签实现图形标题的例子,其中都使用了 3 个元素。这就是单标签实现图形上最为核心的一部分:
    我们除了元素本身的样式能够控制之外,还有元素的两个伪元素 -- ::before,::after,实际上一共是 3 个元素。
    好,譬如下面这个心形图形,只能使用一个 div 实现它,该怎么做呢:
    CSS中Single Div 绘图技巧的实现-2.png

    这种不规则的图形本身使用纯 CSS 是比较复杂的,通常会借助 SVG,当然在 CSS 中就是使用 clip-path。不过仔细观察图形,我们不需要 clip-path,尝试将图片分成 3 部分:
    CSS中Single Div 绘图技巧的实现-3.png

    Wow,其实这里,我们只需要元素本身实现正方形,元素的两个伪元素利用绝对定位实现两个圆形,叠加在一起即可!完整的代码也非常简单:
    1. div {
    2.     position: relative;
    3.     transform: rotate(45deg);
    4.     background: rgba(255, 20, 147, 0.85);
    5.     width: 140px;
    6.     height: 140px;
    7. }
    8. div::before,
    9. div::after {
    10.     content: "";
    11.     position: absolute;
    12.     top: 0;
    13.     left: -70px;
    14.     width: 140px;
    15.     height: 140px;
    16.     border-radius: 50%;
    17.     background: rgb(255, 20, 147);
    18. }
    19. div::before {
    20.     top: -70px;
    21.     left: 0;
    22. }
    复制代码
    完整的示例代码,你可以戳这里 CodePen Demo -- A Signle Div heartShape
    渐变 & 多重渐变

    毫不夸张的说,渐变是在单标签实现图形中,使用的最多的一个 CSS 属性。
    原因就在于我们渐变是可以多重渐变的!渐变不仅仅只能是单个的 linear-gradient 或者单个的 radial-gradient,对于 background 而言,它是支持多重渐变的叠加的,一点非常重要。
    好,我们来看看这个太极图:
    CSS中Single Div 绘图技巧的实现-4.png

    其实太极图就是由多个不同颜色的圆组成,这里堆叠多个不同的 div,并且把他们组合在一起肯定是 OK 的。但是我们的目标是使用单个标签完成。
    当图形全是圆或者线条,就应该考虑使用多重线性(径向)渐变了,我们可以将上图拆解一下。
    它其实是由 1 个线性渐变加上 4 个径向渐变生成的圆组成:
    CSS中Single Div 绘图技巧的实现-5.png

    所以,一个太极图完整的代码只需要一个 div 即可,甚至都不需要伪元素的辅助:
    1. div {
    2.     width: 200px;
    3.     height: 200px;
    4.     border-radius: 50%;
    5.     background-image: radial-gradient(#000 12.5px, transparent 12.5px),
    6.         radial-gradient(#fff 12.5px, transparent 12.5px),
    7.         radial-gradient(#fff 50px, transparent 50px),
    8.         radial-gradient(#000 50px, transparent 50px),
    9.         linear-gradient(90deg, #000 100px, #fff 100px);
    10.     background-position: center 50px, center -50px, center 50px, center -50px, 0 0;
    11. }
    复制代码
    完整的示例代码,你可以戳这里 CodePen Demo -- A Single Div PURE CSS Tai Chi
    阴影 & 多重阴影

    与渐变非常类似的一个属性就是阴影 box-shadow,box-shadow 属性它的一个特点也是可以叠加多层的,可以内置多条阴影规则,它简直就是单标签绘图的终极大杀器!
    我们尝试使用一个 div 实现如下图形:
    CSS中Single Div 绘图技巧的实现-6.gif

    乍一看,这个图形其实还是很复杂的,云朵、雨滴都不像是仅仅用一个标签或者一个伪元素能够实现的。
    实则不然,首先我们看看这个云朵,虽然带有不规则的轮廓,但是实际上就是一个一个的圆。非常适合使用多重径向渐变或者是多重阴影!
    其实就是一个实现圆,然后利用阴影实现多个圆的叠加,示例动画,一看就懂:
    CSS中Single Div 绘图技巧的实现-7.gif

    代码量其实也非常少,实现一个云朵的代码:
    1. div{
    2.   width:100px;
    3.   height:100px;
    4.   background:#fff;
    5.   border-radius:50%;
    6.   box-shadow:
    7.     120px 0px 0 -10px #fff,
    8.     95px 20px 0 0px #fff,
    9.     30px 30px 0 -10px #fff,
    10.     90px -20px 0 0px #fff,
    11.     40px -40px 0 0px #fff;
    12. }
    复制代码
    CodePen Demo -- A Single Div Cloudy
    与云朵的示例代码类似,雨滴其实也是借助了多重阴影实现:
    1. div {
    2.     position: absolute;
    3.     width: 3px;
    4.     height: 6px;
    5.     border-radius: 50%;
    6.     animation: rainy_rain 0.7s infinite linear;
    7.     box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px,
    8.             rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,
    9.             rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,
    10.             rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;
    11. }
    12. @keyframes rainy_rain {
    13.     0% {
    14.         box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px,
    15.             rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,
    16.             rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,
    17.             rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;
    18.     }
    19.     // 省略部分阴影位移帧动画代码
    20.     ...
    21.     100% {
    22.         box-shadow: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px,
    23.             rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,
    24.             rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,
    25.             rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;
    26.     }
    27. }
    复制代码
    CSS中Single Div 绘图技巧的实现-8.gif

    刚刚已经使用了元素本身和元素的一个伪元素,剩余一个伪元素实现底部的阴影圆即可,完整的 Demo 代码你可以戳这里:A Signle Div Rainy
    简单总结一下

    到这里,可以简单总结一下,单标签实现图形,尤其是复杂图形,很大程度上都是借助了上述的 3 个技巧,也就是:
      单标签绘图,其实是使用元素本身和它的两个伪元素 ::before 和 ::after合理使用多重渐变叠加合理使用多重阴影叠加
    练习一下
    我们练习一下,使用单个 div 实现下面这个美队盾牌:
    CSS中Single Div 绘图技巧的实现-9.png

    有了上面的铺垫,其实多重的圆形使用多重径向渐变和多重阴影都是都是可以的,而中间的星星,使用字符或者 clip-path 也能非常轻松的实现:
    1. div {
    2.     position: absolute;
    3.     width: 200px;
    4.     height: 200px;
    5.     background:
    6.         radial-gradient(
    7.             at center,
    8.             #0033b0 20%,
    9.             #ce0021 20%,
    10.             #ce0021 35%,
    11.             #eee 35%,
    12.             #eee 55%,
    13.             #ce0021 55%
    14.         );
    15.     border-radius: 50%;
    16. }
    17. div::before {
    18.     content: "★";
    19.     position: absolute;
    20.     top: 50%;
    21.     left: 50%;
    22.     transform: translate(-50%, -50%);
    23.     line-height: 47px;
    24.     font-size: 55px;
    25. }
    复制代码
    我们会得到这样一个图形:
    CSS中Single Div 绘图技巧的实现-10.png

    感觉图形少了一些光泽,我们可以往 div 上继续叠加一些 linear-gradient,给盾牌表面添加一些高光:
    1. div {
    2.     position: absolute;
    3.     width: 200px;
    4.     height: 200px;
    5.     background: linear-gradient(45deg,  rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 65%),
    6.         linear-gradient(-45deg, rgba(255, 255, 255, 0) 35%,  rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 65%),
    7.         linear-gradient(to right, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 65%),
    8.         linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 65%),
    9.         radial-gradient(
    10.             ellipse at center,
    11.             #0033b0 20%,
    12.             #ce0021 20%,
    13.             #ce0021 35%,
    14.             #eee 35%,
    15.             #eee 55%,
    16.             #ce0021 55%
    17.         );
    18.     border-radius: 50%;
    19. }
    20. div::before {
    21.     content: "★";
    22.     position: absolute;
    23.     top: 50%;
    24.     left: 50%;
    25.     transform: translate(-50%, -50%);
    26.     line-height: 47px;
    27.     font-size: 55px;
    28. }
    复制代码
    OK,便能完美的实现:
    CSS中Single Div 绘图技巧的实现-11.png

    完整的代码你可以戳这里:A Signle Div Shield
    单个标签实现一个磁带

    我们再看看这个图形,一个磁带图形:
    CSS中Single Div 绘图技巧的实现-12.png

    看着很复杂,其实都是圆和各种线条,其实也是适合使用单个标签实现的,就是非常的花时间,需要精细的控制 background-image 里面的每个渐变的 background-size、background-position:
    首先,借由多重渐变,实现整个背景结构:
    1. div {
    2.     width: 180px;
    3.     height: 120px;
    4.     border-radius: 5px;
    5.     background-image: linear-gradient(to right, #444 10px, transparent 10px),
    6.         linear-gradient(to left, #444 10px, transparent 10px),
    7.         linear-gradient(135deg, #444 20px, transparent 20px),
    8.         linear-gradient(-135deg, #444 20px, transparent 20px),
    9.         linear-gradient(
    10.             to bottom,
    11.             transparent 35px,
    12.             #be0974 35px,
    13.             #be0974 43px,
    14.             #da6a57 43px,
    15.             #da6a57 51px,
    16.             #eebc31 51px,
    17.             #eebc31 59px,
    18.             #92a25b 59px,
    19.             #92a25b 67px,
    20.             #46a7c0 67px,
    21.             #46a7c0 75px,
    22.             transparent 75px
    23.         ),
    24.         linear-gradient(
    25.             to bottom,
    26.             transparent 10px,
    27.             #f7f7f7 10px,
    28.             #f7f7f7 85px,
    29.             transparent 85px
    30.         ),
    31.         linear-gradient(to top, transparent 26px, #444 26px),
    32.         linear-gradient(
    33.             105deg,
    34.             #444 70px,
    35.             #333 70px,
    36.             #333 73px,
    37.             transparent 73px
    38.         ),
    39.         linear-gradient(
    40.             -105deg,
    41.             #444 70px,
    42.             #333 70px,
    43.             #333 73px,
    44.             transparent 73px
    45.         ),
    46.         linear-gradient(to top, #444 24px, #777 24px, #777 26px, #444 26px);
    47.     box-shadow: -4px -4px 2px rgb(0 0 0 / 20%);
    48. }
    复制代码
    得到如下图形:
    CSS中Single Div 绘图技巧的实现-13.png

    通过其中一个伪元素,利用 box-shadow 实现磁带上的各个圆圈点:
    1. div:after {
    2.     position: absolute;
    3.     content: "";
    4.     width: 5px;
    5.     height: 5px;
    6.     background: #999;
    7.     border-radius: 50%;
    8.     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;
    9.     left: 5px;
    10.     top: 5px;
    11. }
    复制代码
    CSS中Single Div 绘图技巧的实现-14.png

    最后剩下的一个伪元素,实现磁带中间的部分样式即可:
    1. div:before {
    2.     position: absolute;
    3.     content: "";
    4.     width: 90px;
    5.     height: 26px;
    6.     margin-left: -45px;
    7.     left: 50%;
    8.     top: 41px;
    9.     background-color: #ccc;
    10.     background-image: linear-gradient(to bottom, #444 5px, transparent 5px),
    11.         linear-gradient(to top, #444 5px, transparent 5px),
    12.         linear-gradient(to right, #444 30px, transparent 30px),
    13.         linear-gradient(to left, #444 30px, transparent 30px),
    14.         radial-gradient(circle at 10px 12px, #a0522d 32px, transparent 32px);
    15.     border-radius: 30px;
    16. }
    复制代码
    CSS中Single Div 绘图技巧的实现-15.png

    这样,就顺利使用单个标签实现啦,该 Demo 取自 A Single Div,完整的代码你可以戳这里:CodePen Demo -- A single Div Disk。
    当然,单标签能实现的远不止如此,看看下面这些,都是一个 div 能够实现的:
    CSS中Single Div 绘图技巧的实现-16.png

    配合其它高阶属性

    当然,上述的作图都还是比较常规的,借助伪元素,使用 background、使用 box-shadow。我们还可以尝试在一个 div 内增加混合模式 mix-blend-mode、滤镜 filter 以及 遮罩 mask 等,实现一些更为有意思的效果。
    譬如下述这个效果,使用了一个 div 实现的幽灵效果:
    CSS中Single Div 绘图技巧的实现-17.gif

    在用一个 div 实现基本效果之余,还加上了利用了 filter 滤镜实现了一些融合效果。
    完整的代码你可以戳这里:CodePen Demo -- A Single Div Ghost
    最后

    只使用 CSS 进行单 div 绘图还是非常有意思的,也可以比较好的锻炼 CSS,虽然业务中不一定会用上 :)
    这里再推荐几个单标签绘图的网站,你可以看看再模仿模仿:
      A Single DivMagicCSSCodePen - Single Div
    好了,本文到此结束,希望对你有帮助
    更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
    以上就是CSS中Single Div 绘图技巧的实现的详细内容,更多关于css single div单标签绘图的资料请关注咔叽论坛其它相关文章!

    原文地址:https://www.jb51.net/css/779182.html

    该用户从未签到

    发表于 2023-1-3 09:11:54 | 显示全部楼层
    膜拜神贴,后面的请保持队形 ~www.2nzz.com
    回复 支持 反对

    使用道具 举报

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-29 00:03

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表