关于前端:纯CSS-波点背景

66次阅读

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

本文简介

你负责点赞,我负责更新~

这次要用纯 CSS 做一个波点背景,先上图看看成果。

我把这个成果写在 body 上,如果你不喜爱这个配色也能够本人手动改改。

思路

我实现上图的成果思路是,最先想到应用 background-image,而后应用 radial-gradient 画圆。再配合默认给个背景色,应该差不多能够了。

须要揭示一下,background-image 不单只能插背景图,也能够通过代码实现突变成果(之前遇到一些实习生不分明这点~)。

于是我做了这几步:

  1. 将 body 的宽高设为 100%
  2. margin 设为 0
  3. 设置默认背景色 background-color
  4. 设置圆形背景 background-image: radial-gradient

于是代码变成这样

<style>
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #655;
    background-image: radial-gradient(#f5dab8 30%, transparent 0);
    background-size: 60px 60px;
  }
</style>

我应用 background-size 设置波点的大小。你能够依据本人我的项目理论需要来设置。

是有一点成果了,但此时的波点是横竖有序排列的。我心愿这些波点能错开排列。

于是我又想到,能够做多一层波点,而后应用 background-position 将 2 层波点错开排列。

为了让错开排列后还是放弃着参差的感觉,所以我用的技巧是错开的间隔是波点的一半大小。

也就是说,background-position = background-size / 2。当然,这句是伪代码。

改良后的代码增加了两句:

/* 省略局部代码 */
background-image:
  radial-gradient(#f5dab8 30%, transparent 0),
  radial-gradient(#f5dab8 30%, transparent 0);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;

background-image 里有 2 层 radial-gradientbackground-position 也别离设置了每一层的地位。

最终成果如下所示

残缺代码

<style>
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #655;
    background-image:
      radial-gradient(#f5dab8 30%, transparent 0),
      radial-gradient(#f5dab8 30%, transparent 0);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
  }
</style>

举荐浏览

👍《纯 CSS 红砖背景墙》

👍《CSS 里的 ch 到底是什么货色?》

👍《纯 CSS:动静突变背景【一分钟学会】》

👍《纯 css 实现 117 个 Loading 成果》

👍《纯 CSS 实现『斑马纹理投影文字』》

👍《如何用 CSS 选择符干掉队友》

👍《这 18 个网站能让你的页面背景炫酷起来》

点赞 + 关注 + 珍藏 = 学会了
点赞 + 关注 + 珍藏 = 学会了

正文完
 0