CSS3波浪效果示例(前端必学)

时间：2023-12-15

下面我为大家详细讲解“CSS3波浪效果示例(前端必学)”的完整攻略。

1. 环境准备

首先，我们要准备好编辑器工具，例如Sublime、VSCode等，并且要在电脑上安装好Chrome浏览器。

2. HTML结构

首先，我们先来看一下HTML结构。我们需要一个包含一个<section>标签的HTML文件，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Wave Effect</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <section>
        <h2>Wave Effect</h2>
        <p>This is a wave effect made by CSS3.</p>
    </section>
</body>
</html>

3. CSS样式

接着，我们来到CSS样式。以下代码将创建波浪效果。我们需要设置以下属性：

设置section标签的background属性，使得背景是线性渐变
设置section:before和section:after的content属性，使其产生下弦月和上弦月的效果
设置section:before和section:after的background属性，使其产生渐变色且背景为波浪线
设置波浪线的动画效果

具体的代码如下：

section{
  height: 100%;
  background: -webkit-linear-gradient(top, #3498db 0%,#2980b9 100%);
  background: linear-gradient(to bottom, #3498db 0%,#2980b9 100%);
  position: relative;
  overflow: hidden;
}
section:before, section:after{
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skewY(-10deg);
}
section:before{
  background: -webkit-linear-gradient(top, #2980b9, #3498db);
  background: linear-gradient(to bottom, #2980b9, #3498db);
}
section:after{
  background: -webkit-linear-gradient(top, #2980b9 0%,#3498db 40%,#2980b9 60%,#3498db 100%);
  background: linear-gradient(to bottom, #2980b9 0%,#3498db 40%,#2980b9 60%,#3498db 100%); 
  animation: wave 7s infinite linear;
}
@keyframes wave{
  0%{
    transform: translate3d(0,-25%,0);
  }
  100%{
    transform: translate3d(0,0,0);
  }
}

4. 效果预览

最后，我们来预览一下波浪效果。打开HTML文件，然后用Chrome浏览器打开查看即可。

5. 示例说明

以下是两个波浪效果示例。

示例一：波浪线变色

在第3步的代码中，我们设置了波浪线的颜色以形成渐变色。如果您想让波浪线变成其他的渐变色，只需要修改以下代码即可：

section:after{
  background: -webkit-linear-gradient(top, #2980b9 0%,#3498db 40%,#2980b9 60%,#3498db 100%);
  background: linear-gradient(to bottom, #2980b9 0%,#3498db 40%,#2980b9 60%,#3498db 100%); 
}

将其中的颜色值进行修改，即可实现波浪线渐变色的变化。

示例二：波浪线速度变快

在第3步的代码中，我们设置了波浪线动画的时间为7秒。如果您想让波浪线的速度变得更快，只需要将以下代码中的时长进行修改即可：

section:after{
  animation: wave 7s infinite linear;
}

将其中的7s修改成自己需要的时长，例如3s，则表示波浪线动画时长为3秒。

上一篇：div css命名规范 css class命名规则(符合SEO规范) 下一篇：解析CSS 提取图片主题色功能(小技巧)