【CSS3笔记】之绘制类似小程序“小天气”首页动态圆形图

【“小天气”动态图与实现效果图】

小天气：

效果图对比：

【分析】实际上就是三个旋转的椭圆放在右上角，中心点和大小稍微设置不一样而已。

【核心代码】

css:

.container {
  position: relative;
  margin: auto;
  width: 100px;
  float:right;
  margin-right: -30px;
  margin-top:-40px;
  height: 100px;
}
.container .circle {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background: rgba(138, 43, 226, 0.1);
}
.container .circle:nth-of-type(1) {
  width: 175px;
  height: 170px;
  margin-top:-20px;
  margin-right:-25px;
  animation: rt 8s infinite linear;
  /***box-shadow: 0 0 0 0 rgb(206, 184, 110), inset 0 0 0px 0 rgb(206, 184, 110);**/
}
.container .circle:nth-of-type(2) {
   width: 155px;
  height: 156px;
  margin-right:-15px;
  animation: rt 10s infinite linear;
 /** box-shadow: 0 0 1px 0 rgb(0, 211, 141), inset 0 0 10px 0 rgb(0, 211, 141);**/
}
.container .circle:nth-of-type(3) {
  width: 165px;
  height: 156px;
  margin-right:-5px;
  animation: rt 9s infinite linear;
 /** box-shadow: 0 0 1px 0 rgb(67, 3, 109), inset 0 0 10px 0 rgb(67, 3, 109);**/
}
@keyframes rt {
  100% {
    transform: rotate(360deg);
  }
}

html:

<view class="container">
    <view class="circle"></view>
    <view class="circle"></view>
    <view class="circle"></view>
  </view>