css实现波浪动画效果代码-html代码-BFW代码库

css实现波浪动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现波浪动画效果代码

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

<html>

<head>
    <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.........完整代码请登录后点击上方下载按钮下载查看