css+js实现简洁背景颜色跟随变化的导航条效果代码-html代码-BFW代码库

css+js实现简洁背景颜色跟随变化的导航条效果代码

代码语言：html

代码描述：css+js实现简洁背景颜色跟随变化的导航条效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">



    <style>
        @import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        html,
        body {
          display: flex;
          flex-flow: column wrap;
          justify-content: space-around;
          align-items: center;
          height: 100vh;
          font-family: "Nunito", sans-serif;
          transition: all ease-in-out 800ms;
        }
        html.home,
        body.home {
          background-color: #dc0073;
        }
        html.search,
        body.search {
          background-color: #0496ff;
        }
        html.person,
        body.person {
          background-color: #ffc217;
        }
        
        .container {
          display: flex;
          flex-flow: column wrap;
          align-items: center;
          justify-content: space-between;
          height: 50vh;
        }
        .container > h1 {
          color: white;
          font-weight: 700;
          font-size: 48px;
        }
        .container nav {
          background: #fff;
          width: 500px;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
          box-shadow: 1px 10px 50px rgba(0, 0, 0, 0.2);
        }
        .container nav ul {
          display: flex;
          justify-content: space-around;
          padding: 20px;
        }
        .container nav ul li {
          list-style: none;
          font-weight: 700;
          cursor: pointer;
          padding: 12px;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          font-size: 14px;
          color: #dc0073;
          width: 100px;
          color: rgba(0, 0, 0, 0.8);
        }
        .container nav ul li.selected {
          border-radius: 40px;
          -webkit-animation: slide-in 800ms forwards;
                  animation: slide-in 800ms forwards;
        }
        .container nav ul li.selected > span {
          opacity: 0;
          -webkit-animation: fade-in 800ms forwards;
                  animation: fade-in 800ms forwards;
          -webkit-animation-delay: 200ms;
                  animation-delay: 200ms;
          transform: translateX(50%);
        }
        .container nav ul li.selected.home {
          background-color: rgba(220, 0, 115, 0.2);
        }
        .container nav ul li.selected.home > span,
        .container nav ul li.selected.home i {
          color: #dc0073;
        }
        .container nav ul li.selected.search {
          background-color: rgba(4, 150, 255, 0.2);
        }
        .container nav ul li.selected.search > span,
        .container nav ul li.selected.search i {
          color: #0496ff;
        }
        .container nav ul li.selected.person {
          background-color: rgba(255, 194, 23, 0.2);
        }
        .container nav ul li.selected.person > span,
        .container nav ul li.selected.person i {
          color: #ffc217;
        }
        .container nav ul li.remove {
          border-radius: 40px;
          -webkit-animation: slide-out 800ms forwards;
                  animation: slide-out 800ms forwards;
        }
        .container nav ul li.remove > span {
          -webkit-animation: fade-out 800ms forwards;
                  animation: fade-out 800ms forwards;
          -webkit-animation-delay: 200ms;
                  animation-delay: 200ms;
 .........完整代码请登录后点击上方下载按钮下载查看