css三角形动态移动

CSS三角形是网页设计中常用的形状之一，它可以通过CSS的变形属性实现动态移动效果。下面我们将介绍如何使用CSS实现三角形动态移动。

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid blue;
  border-bottom: 50px solid transparent;
  position: relative;
  animation: move 2s infinite;
}

@keyframes move {
  0% {
    left: 0;
  }
  50% {
    left: 50%;
  }
  100% {
    left: 100%;
  }
} 

上述代码中，我们首先定义了一个类名为triangle的元素，并且设置了它的样式：宽和高分别为0，三边的边框设置为50px和100px，颜色为blue，位置为相对位置。接着，我们通过CSS3中的动画属性设置了一个名为move的动画，持续时间为2秒，无限循环。

在动画的关键帧中，我们定义了三个状态：0%表示初始状态，left的值为0，即在页面的最左侧；50%表示中间状态，left的值为50%，即在页面正中央；100%表示结束状态，left的值为100%，即在页面的最右侧。

通过这样的设置，我们就实现了一个可以动态移动的三角形效果。你可以通过修改动画的持续时间和移动的距离，来实现不同的效果。试试吧，动起来！