CSS3制作波浪的动画效果
要使用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);
}
}
这段代码会创建一个圆形的波浪动画,它会不停地左右旋转来模拟波浪的动态效果。可以根据需要调整动画的时长、次数和函数,以及波浪的大小和颜色。
评论已关闭