如何使用 CSS 创建绘图效果动画？

CSS 可以使用它的绘图功能创建出很多惊人的动画，无论是图形、字符等等都可以实现。本文将介绍在 CSS 中如何使用绘图来实现动画效果。

1. 使用 border-radius 实现圆形动画

可以利用 border-radius 属性来创建一个圆形，再利用 CSS3 中的动画属性来实现平滑的过渡效果。

.circle {
  width: 50px;
  height: 50px;
  background-color: #333;
  border-radius: 50%;
  animation: circle 2s ease-in-out infinite;
}

@keyframes circle {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

使用该代码，你可以创建一个圆形的 div 元素，并实现一个无限循环的动画，根据规约使其在 2 秒钟内往返缩放 50% 的尺寸。

2. 使用 border 和 margin 属性实现三角形动画

CSS 三角形可以通过 border 属性创建，则 margin 属性可以使它倾斜。可以利用 CSS 中的 transform 属性以及计算好的三角形初始位置、旋转或移动来实现动画。

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 50px solid #333;
  margin: 50px;
  animation: triangle 2s linear infinite;
}

@keyframes triangle {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

使用该代码，你可以创建一个三角形，并使其在 2 秒钟内一次完整旋转 360 度。

3. 使用 box-shadow 属性实现渐变边框动画

可以通过 CSS3 的 box-shadow 属性创建出乍一看可能不想是边框的效果，而极佳地符合了一些动画需求。可以利用 CSS 中的动画属性以及过渡时间来使其实现平滑的过渡效果。

.shadow-border {
  width: 200px;
  height: 200px;
  background-color: #333;
  box-shadow: inset 0 0 0 20px white;
  animation: shadow 2s linear infinite;
}

@keyframes shadow {
  0% {
    box-shadow: inset 0 0 0 0px white;
  }
  100% {
    box-shadow: inset 0 0 0 20px white;
  }
}

使用该代码，你可以创建出一个黑色的正方形，周围有一个白色的内边框在闪烁，而这个闪烁动画也是以循环的方式不断执行。

4. 使用 clip-path 属性实现渐变路线动画

可以在 SVG 中使用路径来实现绘图功能，同样也能在 CSS 中使用 clip-path 属性来实现一个路径的动画，但该属性的使用还不支持所有通用的浏览器。可以使用 clip-path 属性来实现梦想中的路径动画效果。

.path {
  width: 300px;
  height: 150px;
  background-color: #333;
  clip-path: url(#myClip);
  animation: path 2s linear infinite;
}

@keyframes path {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(150px, 0);
  }
}

使用该代码，可以创建出一个黑色的长方形路径，沿路径移动的白色矩形形状的元素，其中这两个元素都已被命名。矩形从其初始位置向右移动了长方形路径的右侧。

结语

本文介绍了四种使用 CSS 实现动画的方式，它们有时就是一种更加有趣的方式帮助你呈现网页。不要害怕尝试新的东西，CSS 动画和绘图并不难，而且将大大增强你网站的视觉吸引力。