利用CSS3动画实现圆圈由小变大向外扩散的效果

可以使用CSS3的`@keyframes`和`transform`属性来实现圆圈由小变大向外扩散的效果。以下是一个示例代码：

.circle {
  width: 20px;
  height: 20px;
  position: relative;
  background-color: #f00;
  border-radius: 50%;
  animation: expandCircle 1s infinite ease-out;
}

@keyframes expandCircle {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

在上面的代码中，我们创建了一个类名为`circle`的元素，它代表了圆圈。通过设置`width`和`height`属性，我们定义了圆圈的初始大小为20px，并使用`background-color`属性设置颜色为红色。`border-radius`属性设置圆角半径为50%以获得圆形的效果。

接下来，我们使用`@keyframes`定义了一个名为`expandCircle`的动画。在动画的开始阶段（0%），圆圈的大小为0，透明度为1。在动画的结束阶段（100%），圆圈的大小为3倍，透明度为0。通过`transform`属性的`scale()`函数可以实现元素的缩放效果。

最后，我们将动画应用于`circle`类，使用`animation`属性将`expandCircle`动画设置为1秒持续时间，并且无限循环播放（`infinite`），并且使用`ease-out`函数使动画结束时的变化更加平滑。

这样，当你在HTML中使用`<div class="circle"></div>`创建一个具有`circle`类的元素时，它将显示为一个逐渐由小变大并向外扩散的圆圈效果。