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

言

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

文章中的代码已经放到github上了，感兴趣的同学可以自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure2.html

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代码

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

结束语

今天这篇文章通过CSS属性实现了相机和月亮两个图案，再结合前几篇文章中实现的杯子和心形图案，相信大家对CSS的神奇之处有所折服吧。

大家也赶紧动手自己实现一些常用的图案吧。

言

太阳、地球、月球应该是我们人人都比较了解的天体，它们的运动轨迹是我们研究星系乃至宇宙的重要信息之一。那么我们如何使用HTML + CSS来模拟这么一个效果呢？

运动轨迹。

简单的来说就是转圈。

// 定义轨迹
@keyframes rotate {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(360deg);
  }
}

定义太阳

/* 定义一个太阳 */
.sum {
  position: relative;
  margin: 100px auto 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    #ff9b9b 0%,
    rgba(235, 36, 64, 0) 70%
    );
}

定义地球

地球绕太阳一圈的时间是365.24天左右，这被称为一年。每年有一个额外的日子被称为闰年，这一年会有366天，目的是为了弥补地球绕太阳的公转周期与我们日历的定义周期之间的不匹配。

/* 定义地球位置及公转信息 */
.earth {
  position: absolute;

  /* 定义地球与太阳的相对位置以及轨道线 */
  width: 300px;
  height: 300px;
  margin-left:-50px;
  margin-top:-50px;
  border:1px solid #dddddd;
  border-radius:50%;

  /*动画： 设定公转时间以及轨迹 */
  animation: rotate 36.524s infinite linear;
}
/* 地球本体 */
.earth::before{
  content: ' ';
  position:absolute;
  background-color: blue;
  width: 30px;
  height: 30px;
  margin-left:70px;
  border-radius: 30px;
}

定义月球

月球绕地球一圈的时间大约是27.32天。这被称为一个月（也称为地月周期）。月亮的运动轨迹略呈椭圆形，因此月球与地球的距离会随时间而变化，这也导致月球的运动速度略有不同，有时会更快，有时会更慢，但平均值仍然是27.32天左右。

/* 定义月球位置及公转信息 */
.moon {
  position: absolute;

  /* 定义月球与地球的相对位置以及轨道线 */
  width: 60px;
  height: 60px;
  margin-left:55px;
  margin-top:-15px;
  border:1px solid #dddddd;
  border-radius:50%;

  /*动画： 设定公转时间以及轨迹 */
  animation: rotate 2.732s infinite linear;
}

/* 月球本体 */
.moon::before{
  content: ' ';
  position:absolute;
  background-color: blue;
  width: 10px;
  height: 10px;
  margin-left:7px;
  border-radius: 10px;
}

html结构 / 天体结构

<div class="sum">
  <div class="earth">
      <div class="moon"></div>
  </div>
</div>

最终效果

SS的强大和精妙，只有在认真研读其代码之后才会深刻明白。

今日继续用纯CSS画图，并给大家整理了本文中所有代码，需要的小伙伴可以私信我哦。

一、阴阳

首先，用CSS画一个阴阳图，如下：

代码也很简单：

#yin-yang {
 width: 96px;
 height: 48px;
 background: #eee;
 border-color: red;
 border-style: solid;
 border-width: 2px 2px 50px 2px;
 border-radius: 100%;
 position: relative;
}
 
#yin-yang:before {
 content: "";
 position: absolute;
 top: 50%;
 left: 0;
 background: #eee;
 border: 18px solid red;
 border-radius: 100%;
 width: 12px;
 height: 12px;
}
 
#yin-yang:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 background: red;
 border: 18px solid #eee;
 border-radius:100%;
 width: 12px;
 height: 12px;
}

当然，颜色什么的，可以随便改啦~

二、鸡蛋

再画一个可爱的鸡蛋~~~像这样：

代码仅仅几句话：

#egg {
 display:block;
 width: 126px;
 height: 180px;
 background-color: red;
 -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
 border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

三、最后画一个弯弯的月亮~

长这样：

代码非常非常少：

#moon {

width: 80px;

height: 80px;

border-radius: 50%;

box-shadow: 15px 15px 0 0 red;

}

是不是很神奇？不敢相信这几句代码居然有这样的功力？

那就打开电脑，按照我之前讲的方法创建一个html试试吧~

不知道怎么创建的小伙伴看这里>>css3制作图形大全：简单几句代码画出漂亮的图形，一起来看看吧~

在线咨询

上一篇：干货:HTML中高效获取url的参数
下一篇：编写灵活、稳定、高质量的CSS代码的规范

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商