[CSS3 Notes] Draw a dynamic circular chart similar to the small program Little Weather homepage

Hits: 0

[“Little Weather” dynamic diagram and realization effect diagram]

little weather:

Comparison of renderings:

[Analysis] In fact, three rotated ellipses are placed in the upper right corner, and the center point and size are slightly different.

【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>

You may also like...

Leave a Reply

Your email address will not be published.