[Note] of CSS3 draw similar applets "small weather" Home dynamic pie chart

[ "Little Weather" dynamic graphic renderings and implementation]

Small weather:

FIG comparison results:

 

[Analysis] actually three rotating oval in the upper right corner, the center point and set the size slightly just not the same.

[] The core code

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>