css布局粉色波纹背景带导航条的单页效果代码-html代码-BFW代码库

css布局粉色波纹背景带导航条的单页效果代码

代码语言：html

代码描述：css布局粉色波纹背景带导航条的单页效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          background-color: #F69899;
          font-family: "arcon";
          overflow: hidden;
        }
        body a {
          color: inherit;
          text-decoration: none;
          transition: color 0.25s cubic-bezier(0.64, 0.57, 0.67, 1.53);
        }
        body .underbackground {
          background-color: #FAFAFA;
          position: absolute;
          top: 0px;
          left: 0px;
          right: 0px;
          height: 120px;
        }
        body .underbackground .header {
          display: flex;
          position: absolute;
          top: calc(50% - 10px);
          left: 30px;
          right: 20px;
          transform: translateY(-50%);
          z-index: 1000;
          color: #F69899;
          line-height: 32px;
        }
        body .underbackground .header a {
          font-size: 18px;
          padding: 0 10px;
        }
        body .underbackground .header a:hover {
          color: #AD5858;
        }
        body .underbackground .header .title {
          flex-grow: 1;
        }
        body .underbackground .header .title a {
          font-size: 32px;
        }
        body .backgrounds .background {
          position: absolute;
          height: 20px;
          left: 0px;
          right: 0px;
          top: 120px;
          -webkit-animation: bg 2s ease-in-out infinite;
                  animation: bg 2s ease-in-out infinite;
        }
        body .backgrounds .background .head {
          position: absolute;
          bottom: 100%;
          left: 0px;
          right: 0px;
          height: 20px;
        }
        body .backgrounds .background.layer-3 {
          background-color: #FAF0F0;
          top: 110px;
        }
        body .backgrounds .background.layer-3 .head {
          background: url(//repo.bfw.wiki/bfwrepo/svg/bowen/grapefruitwave_3.svg);
          background-position: -60px 0px;
        }
        body .backgrounds .background.layer-2 {
          background-color: #FBD7D7;
          top: 114px;
          -webkit-animation-delay: -0.5s;
                  animation-delay: -0.5s;
        }
        body .backgrounds .background.layer-2 .head {
          background: url(//repo.bfw.wiki/bfwrepo/svg/bowen/grapefruitwave_2.svg);
          background-position: -40px 0px;
        }
        body .backgrounds .background.layer-1 {
          height: 30px;
          background-color: #F69899;
          -webkit-animation-delay: -1s;
                  animation-delay: -1s;
        }
        body .backgrounds .background.layer-1 .head {
          background: url(//repo.bfw.wiki/bfwrepo/svg/bowen/grapefruitwave_1.svg);
        }
        body .backgrounds .strawimage {
          z-index: 10000;
          position: absolute;
    .........完整代码请登录后点击上方下载按钮下载查看