css animation参数（css操作，简单的海浪）

：暂无数据 2026-04-20 20:00:03 ：0

在了解css animation参数的过程中，您是否也曾对css操作，简单的海浪感到困惑？别担心，接下来我将结合常见场景，带您一步步理清其中的关键点。

本文目录

css操作，简单的海浪
css3 animation 如何让他停在最后

css操作，简单的海浪

实现思路：

用一个铺满蓝色的背景的盒子，

利用：：before与after画2个圆角值不同的不规则圆形（其中一个设置透明度或者其他颜色，以便区分）：

父元素设置overflow:hidden；
最后加上animation 动画让不同规则圆形旋转起来即可:

《!DOCTYPE html》

《html lang="en"》

《head》

《meta charset="UTF-8"》

《meta name="viewport" content="width=device-width, initial-scale=1.0"》

***隐藏网址***

《title》Document《/title》

《/head》

《body》

《div class="wave"》《/div》

《/body》

《style》

/* // 简单的盒子 */

.wave {

position: relative;

width: 150px;

height: 150px;

background-color: #5291e0;

/* overflow: hidden; */
}

/* // 两个不规则圆形（相对盒子进行定位，距离底部距离则为波浪高度） */

.wave::before,

.wave::after {

content: "";

position: absolute;

left: 50%;

bottom: 15%;

width: 500%;

height: 500%;

border-radius: 45%;

background-color: #fff;

transform: translateX(-50%);

animation: rotate 15s linear infinite;
}
/* // 其中一个不规则圆形调整一下样式，以便区分（或者调整animation的参数来区分） */

.wave::before {

bottom: 10%;

opacity: .5;

border-radius: 47%;

}

/* // 旋转动画 */

@keyframes rotate {

from {

transform: translateX(-50%) rotateZ(0deg);

}

to {

transform: translateX(-50%) rotateZ(360deg);

}

}

《/style》

《/html》

css3 animation 如何让他停在最后

animation-fill-mode : forwards //设置对象状态为动画结束时的状态 animation-fill-mode 语法：animation-fill-mode：none | forwards | backwards | both *默认值：none适用于：所有元素，包含伪对象:after和:before继承性：无取值：none：默认值。不设置对象动画之外的状态forwards：设置对象状态为动画结束时的状态backwards：设置对象状态为动画开始时的状态both：设置对象状态为动画结束或开始的状态说明：检索或设置对象动画时间之外的状态如果提供多个属性值，以逗号进行分隔。对应的脚本特性为animationFillMode。这个是最简单的方法，也可以侦听动画结束事件，给元素加个class类名，这个class定义的就是元素结束时的状态的css样式

希望这篇关于css animation参数的干货，尤其是对css操作，简单的海浪的拆解，能真的帮到你。别忘了点个“在看”支持一下哦！

本文编辑：admin

： css animation参数

上一篇：格式工厂在线转换（jpg在线转换jpeg-如何将jpg图片格式改为jpeg）

下一篇：电脑如何更换鼠标样式（如何更改鼠标指针的外观）