[分享]css动画如何设置一个圆由大变小

CSS动画是一种非常有趣和实用的技术，可以为网页添加一些生动和有趣的效果。在本文中，我们将介绍如何设置一个圆由大变小的动画效果。/设置动画关键帧/ keyframes circle { 0 { tra...

CSS动画是一种非常有趣和实用的技术，可以为网页添加一些生动和有趣的效果。在本文中，我们将介绍如何设置一个圆由大变小的动画效果。

/*设置动画关键帧*/
@keyframes circle {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

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

在上面的代码中，我们采用CSS3中的关键帧动画技术来设置圆的动画效果。通过在@keyframes规则中定义不同的关键帧，我们可以控制元素在不同的时间点上所展示的样式。

我们设置圆的样式为宽度和高度都为100px，边框半径为50%，背景颜色为红色。然后，将动画指定为circle，持续时间为1秒，动画速度为线性（即匀速变化），并且无限循环播放。

最后，我们可以在HTML文件中添加一个class为circle的div元素，来展示我们创建的动画效果：

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

运行以上代码，你将看到一个红色的圆不断地由大变小，这就是设置圆由大变小的动画效果。