CSS画圆以及CSS实现动态圆

要使用CSS画圆，可以使用border-radius属性将一个正方形或矩形元素变成圆形。




.circle {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%; /* 使得宽和高相同的正方形变成圆形 */
}




<div class="circle"></div>

对于CSS实现动态圆，可以使用CSS动画或变换来实现圆的动态效果。




.dynamic-circle {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
  animation: scale-up 2s infinite alternate ease-in-out;
}
 
@keyframes scale-up {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.5); /* 放大为原来的1.5倍 */
  }
}




<div class="dynamic-circle"></div>

在这个例子中，.dynamic-circle类将使得圆形周期性地放大到原来的1.5倍，缩小回原大小，这个动画将无限循环。

CSS画圆以及CSS实现动态圆

评论已关闭

推荐阅读