关于前端:CSS-高阶小技巧-角向渐变的妙用

28次阅读

共计 3240 个字符,预计需要花费 9 分钟才能阅读完成。

本文将介绍一个角向突变的一个十分有意思的小技巧!

咱们尝试应用 CSS 绘制如下图形:

在之前,相似的图案,其实咱们有尝试过,在 单标签实现简单的棋盘布局 一文中,咱们用 单标签实现了这样一个棋盘布局

那么,本文有什么非凡之处呢?让咱们一探到底。

疾速实现网格布局

首先,上述的布局还是心愿应用一个标签实现,这个没有问题。

利用 突变是能够多层的 这个个性,咱们疾速实现页面的网格形态,假如咱们的构造如下:

<div></div>
div {
    margin: auto;
    width: 500px;
    height: 500px;
    background: 
        repeating-linear-gradient(90deg,#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px),
        repeating-linear-gradient(#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px),
        #0e284d;
}

利用两层反复线性突变,咱们能够疾速的失去这样一个图案:

有了这样一个网格之后,剩下要解决的就是如何绘制一个一个的小十字:

在棋盘布局中,咱们尝试过应用多重 box-shadow 实现相似的图案。

本文,咱们将 尝试应用角向突变,疾速实现这个图形

角向突变的技巧

在此之前,咱们先来学习角向突变的这个技巧。

角向突变,也就是 conic-gradient,对它还比拟生疏的,能够先看看我的这篇文章 — 神奇的 conic-gradient 角向突变。

举个例子:

{background: conic-gradient(deeppink, yellowgreen);
}

从突变的圆心、突变起始角度以及突变方向上来说,是这样的:

划重点:

从图中能够看到,角向突变的起始圆心点、起始角度和突变方向为:

  1. 起始点是图形核心,
  2. 默认突变角度 0deg 是从上方垂直于圆心的
  3. 突变方向以顺时针方向绕核心实现

当然,咱们也能够管制角向突变的 起始角度 以及 角向突变的圆心

略微改一下上述代码:

{background: conic-gradient(from 270deg at 50px 50px, deeppink, yellowgreen);
}

成果如下:

咱们扭转了 起始角度 以及 角向突变的圆心

理解了这个之后。咱们基于上述的图形,从新绘制一个图形:

div {
    margin: auto;
    width: 200px;
    height: 200px;
    background: conic-gradient(from 270deg at 50px 50px, deeppink 0%, deeppink 90deg, transparent 90deg, transparent 
 360deg);
    border: 1px solid #000;
}

成果如下:

起始角度 以及 角向突变的圆心 没有扭转,然而只让前 90deg 的图形为粉色,而后 270deg 的图形,设置为了通明色。

咱们利用角向突变,在图像外部,又实现了一个小的矩形!

接下来,咱们再给上述图形,减少一个 background-position: -25px, -25px

div {
    margin: auto;
    width: 200px;
    height: 200px;
    background: conic-gradient(from 270deg at 50px 50px, deeppink 0%, deeppink 90deg, transparent 90deg, transparent 
 360deg);
    background-position: -25px -25px;
    border: 1px solid #000;
}

这样,咱们就神奇的失去了这样一个图形:

为什么会有这样一种景象?如果咱们在代码中退出 background-repeat: no-repeat

div {
    margin: auto;
    width: 200px;
    height: 200px;
    background: conic-gradient(from 270deg at 50px 50px, deeppink 0%, deeppink 90deg, transparent 90deg, transparent 
 360deg);
    background-position: -25px -25px;
    background-repeat: no-repeat;
    border: 1px solid #000;
}

那么就只会剩下左上角一个角:

因而,这里实际上利用了突变图形默认会 repeat 的个性,实际上是这么个意思:

了解了这张图,也就了解了整个技巧的外围所在

了解上述技巧实现图形加号

了解了上述技巧,咱们再回到咱们须要实现的图形中,利用多两层角向突变,咱们就能失去咱们想要的图形。

第一层:

div {
    background: 
        conic-gradient(from 270deg at 5px 20px, #31c2ec 90deg, transparent 0deg),
        repeating-linear-gradient(90deg,#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px),
        repeating-linear-gradient(#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px),
        #0e284d;
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 
        100px 100px,
        100% 100%,
        100% 100%;
    background-position: 
        -2.5px -10px,
        0 0,
        0 0;
}

成果如下:

这里咱们做了什么呢?咱们新增的突变在最上层,也就是第一层突变:

  1. background-size: 100px 100px 将整个页面切割成多份 100px x 100px 的方格
  2. 利用角向突变实现了一个矩形图案
  3. 利用了上述技巧,外围是 background-position: -2.5px -10px 将矩形图案显示在了大小为 100px x 100px 的方格的四个角

第二层角向突变叠加,如法炮制即可:

div {
    background: 
        conic-gradient(from 270deg at 20px 5px, #31c2ec 90deg, transparent 0deg),
        conic-gradient(from 270deg at 5px 20px, #31c2ec 90deg, transparent 0deg),
        repeating-linear-gradient(90deg,#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px),
        repeating-linear-gradient(#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px),
        #0e284d;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    background-size: 
        100px 100px,
        100px 100px,
        100% 100%,
        100% 100%;
    background-position: 
        -10px -2.5px,
        -2.5px -10px,
        0 0,
        0 0;
}

这样,咱们就完满的实现了咱们须要的图形成果:

残缺的代码,你能够戳这里:CodePen Demo — Conic Gradient Skill Demo

总结一下,本文介绍了利用角向突变 conic-gradient 的 position 的小技巧,组合实现了看似很简单的网格布局图案。

最初

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

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

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

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

正文完
 0