css动画延长方形转圈

CSS动画是现代网页开发中常用的技术之一。今天我们来学习如何使用CSS动画来制作一个延长方形转圈的效果。

.square {
  width: 50px;
  height: 50px;
  background-color: #f00;
  position: relative;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
    width: 100px;
    border-radius: 50%;
  }
  100% {
    transform: rotate(360deg);
  }
}

首先，我们需要一个正方形的div，宽高均为50px，并将其相对于其父元素定位。我们给这个div添加上动画，名字为spin，持续时间为4秒，线性运动和无限循环。

接下来，我们需要定义spin动画。在0%处，我们将div旋转0度；在50%处，我们将div旋转180度，并将宽度扩大至100px，同时将其边角变成四分之一圆形；在100%处，我们将div旋转360度，也就是一圈。

最后，我们得到一个漂亮的延长方形转圈的效果。这种效果常用于加载动画，在页面加载过程中展示给用户。