利用预处理做简单动态增长效果

html代码 <div className={styles.container}> <div>利用css3做简单动画</div> <span className={styles.aaa} style={{ width: ${80}% }}></span> <Divider ></Divider> <div>利用css3做简单旋转</div> <div className={styles.circle}> <div className={styles.circle1}> <img src={circle1} alt></img> </div> <div className={styles.circle2}> <img src={circle2} alt></img> </div> </div> </div>

    less代码
    

` .container { width: 800px; height: 500px;

.aaa { display: block; height: 20px; background-color: rgb(48, 37, 138); animation: identifier 2s ease 0s; }

.circle { width: 500px; height: 500px; position: relative; transform: rotateX(53deg);

.circle1 {
  position: absolute;
  top: 0;
  // left: 50%;
  // transform: translateX(-50%);
  width: 500px;
  height: 500px;
  animation: rotate 8s linear 0s infinite;

  img {
    width: 500px;
    height: 500px;
  }
}

.circle2 {
  position: absolute;
  top: 0;
  // left: 50%;
  // transform: translateX(-50%);
  width: 500px;
  height: 500px;
  animation: contrarotate 8s linear 0s infinite;

  img {
    width: 500px;
    height: 500px;
  }
}

} }

@keyframes identifier { 0% { width: 0px; }

100% {} }

@keyframes rotate { 0% { transform: rotateZ(0); }

100% { transform: rotateZ(360deg); } }

@keyframes contrarotate { 0% { transform: rotateZ(0); }

100% { transform: rotateZ(-360deg); } } `