优化上面的代码,加入波浪动效
时间: 2023-05-26 17:02:49 浏览: 38
以下是一个示例代码,通过 CSS 的波浪动画效果实现:
HTML 代码:
```
<div class="wave-container">
<div class="wave"></div>
<div class="text">Hello World!</div>
</div>
```
CSS 代码:
```
.wave-container {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
animation: wave 1s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
transform-origin: center bottom;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
font-weight: bold;
color: #fff;
}
@keyframes wave {
0% {
transform: translateX(0) rotate(0);
}
50% {
transform: translateX(-25%) rotate(-15deg);
}
100% {
transform: translateX(0) rotate(0);
}
}
```
解释一下:
- 使用一个容器,设置宽高和 `overflow: hidden`。
- 在容器中添加一个波浪的实现元素,设置为 `position: absolute`,并把它放在容器底部。通过一个线性渐变的 background 实现渐变的波浪。
- 为波浪元素设置一个 `transform-origin: center bottom`,降低波浪运动时变形的影响。
- 添加一个文字标签,通过 `position: absolute` 和 `transform: translate(-50%, -50%)` 居中。
- 使用 `@keyframes` 动画实现波浪的运动效果。可以根据需要调整具体的运动方式和动画时长。