纯CSS 波点背景

  • 纯CSS 波点背景已关闭评论
  • 28 次浏览
  • A+
所属分类:Web前端
摘要

你负责点赞,我负责更新~这次要用纯CSS做一个波点背景,先上图看看效果。我把这个效果写在 body 上,如果你不喜欢这个配色也可以自己手动改改。


本文简介

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

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

纯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> 

纯CSS 波点背景

我使用 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 也分别设置了每一层的位置。

最终效果如下所示

纯CSS 波点背景

完整代码

<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个网站能让你的页面背景炫酷起来》

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