服务器之家
您的位置： 首页 编程语言 css

再复杂的图案也难不倒CSS，CSS来帮你实现相机和月亮图案

100人浏览   2024-09-17 08:18:12

前言

在之前的文章中有讲解过，如何通过CSS代码实现类似于杯子和心形的图案，今天这篇文章我们继续来看看两个复杂的图案。


CSS3

相机

首先我们来看看相机的实现效果。

效果图

然后我们再一步步分析如何实现这个效果。

同样我们需要对整个图案进行拆分，主要分为三个部分。

  • 相机的主体部分，背景色为黑色。

  • 右上角的白色背景小方框。

  • 中间的几个黑白相间的圆环。

相机主体

相机主体部分就是一个div，完全通过border属性设置，因此需要保证其width: 0。

由于主体部分需要呈现为长方形，所以border的左右两个方向要比上下两个方向值大，border在不设置颜色的情况下默认为黑色。

最后设置border-radius值，让其四个角呈现为圆角。

最终得到的相机主体部分CSS属性如下。

相机主体CSS属性

右上角长方形

相机的右上角有个小的长方形，我们通过:after伪元素实现。

  • 将其位置设置为绝对定位position: absolute。

  • 设置top和left两个方向的偏移量。

  • 设置一个宽度但是高度值为0，通过border-top让其显示为一个长方形，border的颜色设置为白色。

  • 伪元素的content: ''

通过以上的分析我们得到以下的CSS代码。

右上角CSS代码

中间的圆环

大家都很容易想到中间的圆环肯定是通过伪元素:before来实现了。

  • 将其位置定义为绝对定位position: absolute。

  • 设置top和left两个方向的偏移量。

  • 由于这里有圆环，我们设置其内容的高度和宽度。

  • 因为是圆形，border-radius设置为50%

  • 设置border值，使其背景色为白色。

通过以上的分析我们得到如下的CSS代码。

CSS代码

运行上述的代码后我们却发现得到的图案是这样的。

运行后的图案

是不是觉得少了点什么？

对，中间的圆形少了一个环，那么我们该怎么补充上这个环呢？

这里我们可以使用神奇的box-shadow属性。

box-shadow属性主要是用来给元素周围添加阴影效果的，它的基本用法大家可以看看CSS3的文档。

box-shadow接收的第三个参数表示的是阴影模糊的半径，如果其值为0，则表示不具有模糊效果，本例子中因为要在圆形外面再增加一个圆形图案，就需要将其值设置为0。

还有很重要的一点就是：可以给box-shadow设置多组值，任意一个相同的属性，后面定义的值都会兼容前面的值，并不会覆盖掉。

所以同心圆就只需要将box-shadow设置为两组值即可，外层与内层颜色不同。

最终得到的中间圆环CSS属性如下所示。

CSS代码

运行上述代码后就可以得到文字一开始的相机图案了。

月亮

接下来我们再看一个通过box-shadow可以很容实现的月亮图案。

月亮图案

乍一看这个图案没有那么容易实现，其实熟悉border-radius和box-shadow属性的同学可以很容易想到，这个图案实现的核心就是利用box-shadow设置右侧阴影。

然后设置rotate值使其旋转一定的角度。

通过以上的分析可以得到以下的代码。

月亮的CSS代码

运行上述代码即可得到月亮图案。


相关推荐