css背景渐变波浪动

CSS背景渐变波浪动效果能够为网页增添一份优美与动感，让页面更具吸引力。在这篇文章中，我将为大家介绍如何使用CSS实现背景渐变波浪动效果。

.ocean {
  
  width: 100%;
  
  height: 500px;
  
  background: linear-gradient(180deg, #03619c, #009688);
  
  position: relative;
  
  overflow: hidden;
}
  .wave {
  
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg') repeat-x;
  
  position: absolute;
  
  bottom: 0;
  
  width: 100%;
  
  height: 15%;
  
  transform-origin: center bottom;
}
  .wave.one {
  
  animation: wave 20s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  
  z-index: 1;
  
  opacity: 0.5;
}
  .wave.two {
  
  animation: wave 15s cubic-bezier(0.36, 0.45, 0.63, 0.53) -2.5s infinite;
  
  opacity: 0.7;
}
  .wave.three {
  
  animation: wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) -2s infinite;
}
  @keyframes wave {
  
  0% {
  
   
 transform: rotate(0deg);
  
}
  
  100% {
  
   
 transform: rotate(360deg);
  
}
}
 

首先，我们需要创建一个类名为 "ocean" 的元素，并设置其 width、height、background 属性。其中的 background 属性使用了 linear-gradient，表示从左到右创建一条渐变色的背景。

接着，我们创建三个类名为 "wave" 的元素，分别代表三个波浪。用 background 属性来设置这些元素的背景，url 指向了一个波浪的 SVG 图片。这些波浪元素需设置 position 和 bottom 属性，使它们的位置贴近 "ocean" 元素底部。

在动画方面，我们使用了关键帧 animation，来在一个波浪元素上实现旋转的动画效果。为了让波浪产生动态效果，我们需要为不同波浪元素设置不同的动画参数，如动画时间和延迟。

最后我们为第一个波浪元素设置一个较低的透明度，以产生远处海浪的视觉效果。

整个代码便是完整的实现背景渐变波浪动效果的过程。我们可以将这些代码放入一个 HTML 文件中，对其进行编辑与实现。