前言

只有你想不到，没有CSS做不到。今日分享只由 css 实现的效果 - weather
效果

Sunny

<!-- html -->
<div class="weather">
    <div class="sunny">
        <span class="sun"></span>
    </div>
</div>

<!-- css -->
.weather {
  width: 100%;
  font-size: -webkit-calc(1em);
  font-size: calc(1em);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  font-family: 'Work Sans', sans-serif;
  background: #212125;
  color: #e6e8db;
}
.sunny {
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  display: block;
  position: relative;
  font-size: -webkit-calc(11em);
  font-size: calc(11em);
  width: 1em;
  height: 1em;
  margin: .3em;
  border-radius: 100%;
  -webkit-box-shadow: 0 0 0 0.05em currentColor inset, 0 0 0.3em -0.03em #fd6f21;
          box-shadow: 0 0 0 0.05em currentColor inset, 0 0 0.3em -0.03em #fd6f21;
  background: -webkit-linear-gradient(top right, #fc5830 0%, #f98c24 65%);
  background: linear-gradient(to top right, #fc5830 0%, #f98c24 65%);
}
.sun {
  position: absolute;
  top: 20%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 40%;
  height: 40%;
  border-radius: 100%;
  background: #ffeb3b;
  -webkit-box-shadow: 0 0 0 0.02em currentColor inset, 0 0 0.3em -0.03em #fd6f21;
          box-shadow: 0 0 0 0.02em currentColor inset, 0 0 0.3em -0.03em #fd6f21;
  -webkit-transform-origin: .1em .1em;
      -ms-transform-origin: .1em .1em;
          transform-origin: .1em .1em;
}
.sun::after {
  content: '';
  position: absolute;
  top: .1em;
  left: 0;
  will-change: transform;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: .1em;
  height: .1em;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.1);
  -webkit-box-shadow: 0 0 0.1em 0 rgba(255, 255, 255, 0.3) inset, -0.1em -0.1em 0 0.2em rgba(255, 255, 255, 0.1);
          box-shadow: 0 0 0.1em 0 rgba(255, 255, 255, 0.3) inset, -0.1em -0.1em 0 0.2em rgba(255, 255, 255, 0.1);
  -webkit-animation: flare 12000ms infinite alternate linear;
          animation: flare 12000ms infinite alternate linear;
}
@-webkit-keyframes flare {
  to {
    -webkit-transform: translate(-0.3em, 0.3em);
            transform: translate(-0.3em, 0.3em);
    opacity: .4;
    font-size: .2em;
  }
}
@keyframes flare {
  to {
    -webkit-transform: translate(-0.3em, 0.3em);
            transform: translate(-0.3em, 0.3em);
    opacity: .4;
    font-size: .2em;
  }
}

分析
接下来简单介绍其中所运用到的重要属性

linear-gradient：用于创建一个线性渐变的图像。这里的背景渐变就是由该属性来实现；

box-shadow：向框添加一个或多个阴影，可以设置水平、垂直、内部、外部阴影等。这里的光环就是由该属性来实现；

animation：动画属性，可以规定动画时间、速度曲线、播放次数等。这里所有的动画效果都是由该属性来实现；

ill-change：为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这里的雨、雪和流星的效果就使用了该属性。

radial-gradient：该函数创建一个，用来展示由原点（渐变中心）辐射开的颜色渐变。这里星系效果都是由该属性来实现。

一起画

上面介绍了部分重要的属性，现在我们来一步一步实现 Cloudy 的效果。

第一步

做一个黑色背景，因为黑色视觉反差大视觉效果杠杠的，这里用 linear-gradient 做一个渐变的圆并位于画布垂直水平居中。

<div class="weather">
    <div class="cloudy">
    </div>
</div>

.weather {
  width: 100%;
  height: 500px;
  background: #212125;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.cloudy {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  background: linear-gradient(to top right, #1b9ce2 0, #e0e2e5 90%);
}

第二步

我们来做光圈，有种布灵不灵的感觉了，这里用到 box-shadow，再示例中我们用到了一个属性叫 currentColor，它会继承父类的 color 值。

// css
.weather {
  ...
  color: #e6e8db;
}

.cloudy {
  ...
  box-shadow: 0 0 0 10px currentColor inset,0 0 100px -10px #c9e8de;
}

第三步

我们来做一朵云彩，这里运用到了伪元素，所以一朵云彩只需要一个 dom。

// html

<div class="weather">
    <div class="cloudy">
        <span class="cloud"></span>
    </div>
</div>

// css
.cloud {
  position: absolute;
  top: 25%;
  left: 40%;
  width: 100px;
  height: 30px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 0 20px 10px currentColor inset,0 0 100px -10px #c9e8de;
}
.cloud::before {
  left: 15px;
  height: 50px;
  width: 50px;
}
.cloud::after {
  left: 45px;
  height: 35px;
  width: 35px;
}
.cloud::before, .cloud::after {
  content: '';
  position: inherit;
  border-radius: 100%;
  background-color: inherit;
  box-shadow: inherit;
  bottom: 40%;
}

第四步

让云彩动起来！！！

// css

.cloud {
  ...
  animation: move 4000ms infinite ease-in-out;
}
@keyframes move {
  50% {
    transform: translateX(-10px);
  }
}