svg实现背景波纹波动效果-html代码-BFW代码库

svg实现背景波纹波动效果

代码语言：html

所属分类：背景

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html, body {
  height: 100%;
}

body {
  background: radial-gradient(ellipse at center, #fffeea 0%, #fffeea 35%, #B7E8EB 100%);
  overflow: hidden;
}

.ocean {
  height: 5%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #015871;
}

.wave {
  background: url("data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYwMCIgaGVpZ2h0PSIxOTgiPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iNTAlIiB4Mj0iNTAlIiB5MT0iLTEwLjk1OSUiIHkyPSIxMDAlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzU3QkJDMSIgc3RvcC1vcGFjaXR5PSIuMjUiIG9mZnNldD0iMCUiLz4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAxNTg3MSIgb2Zmc2V0PSIxMDAlIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cGF0aCBmaWxsPSJ1cmwoI2EpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0uMDA1IDEyMUMzMTEgMTIxIDQwOS44OTgtLjI1IDgxMSAwYzQwMCAwIDUwMCAxMjEgNzg5IDEyMXY3N0gwcy4wMDUtNDggLjAwNS03N3oiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDE2MDAgMCkiLz4KPC9zdmc+Cg==") repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  -webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
          animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  -webki.........完整代码请登录后点击上方下载按钮下载查看