持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情
点赞 + 收藏 + 关注 = 学会了
先上图看看效果再介绍
我把这个想过设置在 body
标签上了,所以整个网页的背景都变成了红砖效果。
在很多很多年前,我购买了《CSS揭秘》这本书,在里面发现了作者 Lea Verou 的网站。我必须推荐大家阅读《CSS揭秘》,里面的每个例子都让我拍案叫绝。
在我个人看来,这本书是每个打算从初升高的前端必读的css书籍,它是一本进阶级的书,不会跟你讲过多的css基础。
我在 《这18个网站能让你的页面背景炫酷起来》 里也推荐过她的网站,大家有兴趣可以去看看~
本文所讲的内容是 Lea Verou 网站中的 bricks 例子 里的代码,因为网站上没有解释这个实现原理,所以我打算简单讲两句。
如果你想直接获取完整代码,可以滑动到文章底部直接复制走人;你也可以先看看完整代码,然后自己分析一下,再和我的分析做对比~
直接给答案:
- 用
background-image
的渐变来实现;- 用2个直角三角形可以组合成1个矩形,而这两个三角形又有点色差的话,就能做出类似砖块的效果~
其实本例和 《纯CSS 实现格子背景(国际象棋棋盘)》 有点像,如果你读过格子背景那篇文章会更容易理解本文。
主要是通过两个不同颜色的三角形,合成一个长方形。再通过做2层这种长方形,调整好相应的位置,就形成以上效果。
画2个不同颜色的三角形,把下面三角形分别往上和往左移动一点点。
```html ```
从上图的效果可以看到行距比较大。所以需要再画一层同样的红砖,调整“新红砖层”的位置。
```html ```
如果你愿意再写点小渐变,这个砖块的立体效果会更加明显~
《纯CSS 实现格子背景(国际象棋棋盘)》
《这18个网站能让你的页面背景炫酷起来》
《console.log也能插图》
《阅读Skeleton.css源码》
《纯css实现117个Loading效果》
《纯CSS:动态渐变背景》