Question

我的实际动画：

＆＃13;

@keyframes circle {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(6)
  }
}
 .circle {
   margin: 0 auto;
   width: 25px;
   height: 25px;
   border: 1px solid rgba(245, 139, 45, 0.6);
   border-radius: 50%;
   position: absolute;
   top: 200px;
   left: 200px;
}


   .circle.one {
     animation: circle 11s infinite linear;
     border: 1px solid rgba(93, 194, 230, 0.4);
   }

   .circle.two {
     animation: circle 9s infinite linear;
     border-width: 0.1em;
     border: 1px solid rgba(251, 192, 35, 0.5);
   }

   .circle.three {
     animation: circle 7s infinite linear;

   }

   .circle.four {
     animation: circle 5s infinite linear;
     border: 1px solid rgba(93, 194, 230, 0.4);
   }

   .circle.five {
     animation: circle 3s infinite linear;
     border: 0.1em solid rgba(93, 194, 230, 0.6);
   }

＆＃13;

<body>
  <div class="circle one"></div>
  <div class="circle two"></div>
  <div class="circle three"></div>
  <div class="circle four"></div>
  <div class="circle five"></div>
</body>

＆＃13;

我想要跟随观点，可能使用一些perspective-origin（https://css-tricks.com/almanac/properties/p/perspective-origin/）配置： http://imgur.com/kjITGi6

欢迎任何使动画更柔和的建议：）

Answer 1

变换matrix3d会解决，在这里找到一个好的生成器：http://www.useragentman.com/matrix/ 但是通过简单地在我的'circle'类中添加'width'来解决问题。

改变CSS Circle动画的视角

1 个答案: