怎么用js做丝带飘动效果

可以使用CSS3的animation属性和@keyframes规则来实现丝带飘动的效果，也可以使用JavaScript来动态修改CSS属性来实现。

下面是一个使用CSS3实现的示例代码：

HTML代码：

<div class="ribbon"></div>

CSS代码：

.ribbon {
  position: relative;
  width: 200px;
  height: 200px;
  background-image: url("ribbon.png");
  background-size: contain;
  animation: ribbon 2s infinite ease-in-out;
}

@keyframes ribbon {
  0% {
    transform: rotateZ(0deg) translateX(0);
  }
  50% {
    transform: rotateZ(360deg) translateX(50px);
  }
  100% {
    transform: rotateZ(720deg) translateX(0);
  }
}

这段代码中，我们创建了一个宽高都为200px的div元素，并设置了一个背景图作为丝带的样式。然后，我们使用animation属性来定义一个名为ribbon的动画，它会无限循环地播放，并且使用ease-in-out作为动画的缓动函数。在@keyframes规则中，我们定义了三个关键帧，分别表示动画的起始、中间和结束状态。在每个关键帧中，我们使用transform属性来实现旋转和平移，从而让丝带实现飘动的效果。

如果你想要使用JavaScript来实现，可以使用Element.style来动态修改CSS属性。例如：

const ribbon = document.querySelector('.ribbon');
let angle = 0;

setInterval(() => {
  angle += 5;
  ribbon.style.transform = `rotateZ(${angle}deg)`;
}, 50);

这段代码中，我们使用setInterval函数来定时更新丝带的旋转角度，从而实现飘动的效果。在每次更新中，我们将旋转角度加上5度，并使用Element.style来设置transform属性。