css实现伸缩型带图标导航条效果代码-html代码-BFW代码库

css实现伸缩型带图标导航条效果代码

代码语言：html

代码描述：css实现伸缩型带图标导航条效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.3.0.css">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Roboto");
    body {
      font-family: "Roboto", sans-serif;
      font-size: 32px;
      background: #f5f9ff;
    }
    
    .container {
      display: flex;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      width: 18em;
      height: 1.5em;
      flex-flow: row wrap;
      justify-content: center;
    }
    
    .option {
      flex: 1 1 2em;
      color: #f0f0f0;
      font-size: 16px;
      display: flex;
      align-items: center;
      z-index: 2;
      cursor: pointer;
      border: none;
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      -moz-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      -ms-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      -o-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .option::before {
      content: "";
      position: relative;
      width: 1.7em;
      height: 100%;
      left: 0%;
      top: 0%;
      color: #f0f0f0;
      transform-origin: left top;
      transform: skew(-30deg, 0deg);
      -webkit-transform: skew(-30deg, 0deg);
      -moz-transform: skew(-30deg, 0deg);
      -ms-transform: skew(-30deg, 0d.........完整代码请登录后点击上方下载按钮下载查看