[分享]css3圆的无限缩放

CSS3圆与无限缩放有着不可分割的关系。圆可以通过borderradius属性来实现，而无限缩放则可以通过CSS3动画实现。下面我们来看一下如何实现圆的无限缩放效果。/ 圆形样式 / .circle ...

CSS3圆与无限缩放有着不可分割的关系。圆可以通过border-radius属性来实现，而无限缩放则可以通过CSS3动画实现。下面我们来看一下如何实现圆的无限缩放效果。

/* 圆形样式 */
.circle {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   background-color: #f00;
   animation: scale 1s infinite alternate;
}

/* 动画效果 */
@keyframes scale {
   from {
       transform: scale(1);
   }
   to {
       transform: scale(1.5);
   }
} 

以上代码，我们定义了一个宽高为100px的圆形，通过设置border-radius为50%，使它呈现出了圆形的效果。同时，我们还设置了背景颜色为#f00，表示红色。然后，我们定义了一个名为scale的动画效果，设置了1秒的动画时长，infinite表示它将无限次数地执行，并且通过alternate属性，让它来回循环执行。

这样，我们就可以得到一个不断缩放的红色圆形了。