css写一个由一个元素实现的加载动画

可以使用CSS3的动画特性来实现一个由一个元素实现的加载动画。以下是一个简单的实现步骤：

1. 创建一个HTML元素，例如div，作为加载动画的容器。

<div class="loading"></div>

2. 使用CSS为该元素添加样式，包括颜色、大小、位置等。

.loading {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: loading 1s ease-in-out infinite;
}

在上述代码中，我们使用了CSS3的transform属性将该元素居中，同时使用了animation属性为该元素添加一个名为loading的动画。该动画的定义如下：

@keyframes loading {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.0);
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

该动画定义了一个元素从0.5倍大小渐变到1倍大小再渐变回0.5倍大小的动画效果，并且在动画的开始和结束时设置元素的不透明度为0，中间时设置为1，从而形成一个加载动画的效果。

这样，我们就实现了一个简单的由一个元素实现的加载动画。