我们创建了一个很酷的网页底部水波动画效果，通过不同的透明度和动画延迟时间营造出动态的水波纹效果。
代码说明
- HTML结构:
- 使用
<section>标签定义了一个全屏的容器，背景颜色为深蓝色。 - 在
<section>内创建了四个带有不同类名的<div>元素，每个<div>代表一个水波层。
- 使用
- CSS样式:
- 设置全局样式，使页面居中显示，并设置了背景颜色。
- 定义了
section的样式，使其占据整个视口并隐藏溢出内容。 - 定义了
.wave类的基本样式，包括宽度、高度、位置和背景图像。 - 使用Base64编码嵌入了水波图案的PNG图像。
- 分别定义了四个不同的
.wave子类（.wave1,.wave2,.wave3,.wave4），每个类设置了不同的动画效果、透明度、层级和延迟时间。 - 使用
@keyframes规则定义了两个动画效果animate1和animate2，分别控制背景图像水平移动的方向。
- 动画效果:
animation: animate1 15s linear infinite;：这行CSS代码将animate1动画应用到带有.wave1类的元素上，动画持续时间为15秒，线性播放，无限循环。animation: animate2 15s linear infinite;：这行CSS代码将animate2动画应用到带有.wave2类的元素上，动画持续时间为15秒，线性播放，无限循环。- 类似的动画效果应用于其他水波层，通过调整动画时间和延迟实现层次感。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>网页底部水波纹特效</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
position: relative;
width: 100%;
height: 100vh;
background: #3586ff;
overflow: hidden;
}
section .wave {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
background: url("data:image/png;base64,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");
background-size: 1800px 100px;
}
section .wave.wave1 {
animation: animate1 15s linear infinite;
z-index: 1000;
opacity: 1;
animation-delay: 0s;
bottom: 0;
}
section .wave.wave2 {
animation: animate2 15s linear infinite;
z-index: 999;
opacity: 0.5;
animation-delay: -3s;
bottom: 20px;
}
section .wave.wave3 {
animation: animate1 10s linear infinite;
z-index: 998;
opacity: 0.2;
animation-delay: -7s;
bottom: 30px;
}
section .wave.wave4 {
animation: animate2 5s linear infinite;
z-index: 997;
opacity: 0.71;
animation-delay: -5s;
bottom: 25px;
}
@keyframes animate1 {
0% {
background-position-x: 0;
}
100% {
background-position-x: 1800px;
}
}
@keyframes animate2 {
0% {
background-position-x: 0;
}
100% {
background-position-x: -1800px;
}
}
</style>
</head>
<body>
<section>
<div class="wave wave1 "></div>
<div class="wave wave2 "></div>
<div class="wave wave3 "></div>
<div class="wave wave4"></div>
</section>
</body>
</html>
No responses yet