如何在梯形上设置两个以上的点的动画？

在梯形上设置两个以上的点的动画可以通过使用CSS和JavaScript来实现。下面是一个基本的实现步骤：

创建一个HTML元素，用于表示梯形。可以使用CSS的transform属性来实现梯形效果。

<div class="trapezoid"></div>

使用CSS样式来定义梯形的外观，包括颜色、大小和位置等。

.trapezoid {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

使用JavaScript来创建并控制动画效果。可以使用CSS的animation属性来定义动画，并使用JavaScript来触发动画。

var trapezoid = document.querySelector('.trapezoid');
trapezoid.addEventListener('click', function() {
  trapezoid.classList.toggle('animate');
});

使用CSS样式来定义动画效果。可以使用CSS的@keyframes规则来定义动画的关键帧。

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(200px); }
  100% { transform: translateX(0); }
}

.animate {
  animation: move 2s infinite;
}

在上述代码中，点击梯形元素时会添加或移除animate类，从而触发或停止动画效果。动画效果会使梯形元素在X轴上来回平移。

这是一个基本的实现示例，你可以根据具体需求进行调整和扩展。关于动画和CSS的更多细节，你可以参考腾讯云的CSS动画相关文档：CSS动画 - 腾讯云。