CSS3制作波浪的动画效果

作者：System 时间：2024年08月16日分类：所有,css3 字数：569

这篇文章距离上次修改已过231天，其中的内容可能已经有所变动。

要使用CSS3制作波浪的动画效果，可以使用@keyframes规则来创建动画，并使用transform属性的rotate函数来旋转元素，以达到波浪的效果。以下是一个简单的例子：

HTML:

<div class="wave"></div>

CSS:

.wave {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
  position: relative;
  animation: wave-animation 2s infinite linear;
}

@keyframes wave-animation {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}

这段代码会创建一个圆形的波浪动画，它会不停地左右旋转来模拟波浪的动态效果。可以根据需要调整动画的时长、次数和函数，以及波浪的大小和颜色。

CSS3制作波浪的动画效果

评论已关闭

推荐阅读