html - 如何让汉堡图标顺滑跟随浏览器？

问题描述

我使用 Media Query 创建了一个断点，汉堡图标将消失，但它会快速跳转到第一个breakpoint(345px)到second one(480px). 我想要做的是使图标平滑移动。我认为问题在于我影响了position: absolute; top ***px; left***px每个断点中的图标。我想删除它，但如果我摆脱它，单击时汉堡图标会移动。

任何人都可以帮助我吗？

索引.php

 <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/mobile.css" media="screen and (max-width:480px)">
</head>
<body>
  <nav class="navbar navbar-expand-md navbar-light" style="">
    <div class="container">
      <a href="index.php" class="navbar-brand">
        <h4 class="d-inline align-middle">Joey Namiki</h4>
      </a>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a href="index.php" class="nav-link active">Work</a>
          </li>
          <li class="nav-item">
            <a href="about.php" class="nav-link">About</a>
          </li>
        <li class="nav-item">
            <a href="http://joeynamiki.com/work/skills.php" class="nav-link">Skills</a>
        </li>
        <li class="nav-item">
            <a href="http://joeynamiki.com/workj/index.php" class="nav-link">JP</a>
        </li>
        </ul>
      </div><!-- </container> -->
  </nav>




  <!-- SHOWCASE-->
  <section id="showcase" class="py-5">
      <div class="container">
        <div class="row">

          <div class="col-lg-6 text-center lightUp comeOut1">
            <div class="projectImage1">
              <a href="project.php"><img src="img/image1.jpg" alt="" class="img-fluid mb-3"></a>
            </div>
            <p class="caption1">FEELGOOD.etc: Web Design</p>
          </div><!-- col-lg-6 -->

          <div class="col-lg-6 text-center lightUp comeOut2">
            <div class="projectImage2">
              <a href="project3.php"><img src="img/picture1.jpg" alt="" class="img-fluid mb-3"></a>
            </div>
            <p class="caption2">GoFind.ai: UX/UI</p>
          </div><!-- col-lg-6 -->

          <div class="col-lg-6 text-center lightUp comeOut3">
            <div class="projectImage3">
              <a href="project2.php"><img src="img/picture2.jpg" alt="" class="img-fluid mb-3"></a>
            </div>
            <p class="caption3">JRP: Brand Identity</p>
          </div><!-- col-lg-6 -->

          <div class="col-lg-6 text-center lightUp comeOut4">
            <div class="projectImage4">
              <a href="http://joeynamiki.com/resume/project3_1.php"><img src="img/image4.jpg" alt="" class="img-fluid mb-3"></a>
            </div>
            <p class="caption4">SoofStore!: Graphic Design</p>
          </div><!-- col-lg-6 -->

样式.css

body {
  margin-top: 20px;
}
.navbar {
  opacity: 0.9;
  height: 80px;
}
.info-header {
  width: 50%;
  margin: auto;
  border-bottom: 1px #ddd solid; }

#mypassion-section .fa, #strength-section .fa {
  color: #fff;
  background: #333;
  padding: 4px;
  border-radius: 5px;
  font-size: 30px; }

#strength-section .fa {
  background: #fff;
  padding: 4px;
  border-radius: 5px;
  font-size: 30px; }


.card:hover {
     opacity: 0.9;
}
.mainPic1 {
  text-align: center;
  list-style: none;
}
.btn_position{
  display: block;
  margin: 0 auto;
}
.nextProject {
  text-align: right;
}
.question {}
.wireframe{
    list-style: none;
    float:left;
}
.wireText {
  clear: both;
}
.wireframeBox {
  /* background: #f4f4f4;
  width: 650px;
  height: 642px;
  margin: 0 auto; */
}
.intro {
  list-style: none;
}
#about .sns fa {
  font-size: 15px;
  text-align: center; }
#about .sns fa:hover {
  opacity: 0.7; }
.nonDots {
  list-style: none;
}
/* .lightUp:hover {
     opacity: 0.8;
} */
.line {
  float:left;
}
.next {
}
/* .comeOut:hover {
  background: rgba(255,255,255,0);
} */
/* .projectImage1:hover {
  opacity:0;
} */
.projectImage1 {
  position:relative;
}
.projectImage2 {
  position:relative;
}
.projectImage3 {
  position:relative;
}
.projectImage4 {
  position:relative;
}

.caption1 {
  color:#000;
  font-size: 36px;
  text-align: center;
  position: absolute;
  top: 120px;
  left:80px;
  opacity:0;
}
.caption2 {
  color:#000;
  font-size: 36px;
  text-align: center;
  position: absolute;
  top: 120px;
  left:80px;
  opacity:0;
}
.caption3 {
  color:#000;
  font-size: 36px;
  text-align: center;
  position: absolute;
  top: 120px;
  left:80px;
  opacity:0;
}
.caption4 {
  color:#000;
  font-size: 36px;
  text-align: center;
  position: absolute;
  top: 120px;
  left:80px;
  opacity:0;
}
.comeOut1 {
  width:650px;
  /* height:550px; */
}
.comeOut2 {
  width:650px;
  /* height:550px; */
}
.comeOut3 {
  width:650px;
  /* height:500px; */
}
.comeOut4 {
  width: 650px;
  /* height:500px; */
}
.sButton{
  margin-top: 20px;
}

移动.css

@media screen and (min-width: 0px) and (max-width: 320px) {
    .navbar {
    width: 430px;
    height: 80px;
    padding-bottom: 10px;
    display: block;
    position: absolute;
    z-index: 999;
  }
  .navbar-toggler {
    position: absolute;
    top: 5px;
    left: 265px;
  }
  #navbarNav {
    background-color: white;
    opacity: 1;
    color: white;
  }
  #showcase {
    padding-top: 30px;
    z-index: 0;
  }
}/*@media 1px*/
@media screen and (min-width:321px) and ( max-width:345px) {
    .navbar {
    width: 430px;
    height: 80px;
    display: block;
    padding-bottom: 10px;
    position: absolute;
    z-index: 999;
  }
  .navbar-toggler {
    position: absolute;
    top: 5px;
    left: 265px;
  }
  #navbarNav {
    background-color: white;
    opacity: 1;
    color: white;
  }
  #showcase {
    z-index: 0;
  }

}/*@media 321px*/

@media screen and (min-width:346px) and ( max-width:480px) {
    .navbar {
    width: 430px;
    height: 80px;
    display: block;
    padding-bottom: 10px;
    position: absolute;
    z-index: 999;
  }
  .navbar-toggler {
    position: absolute;
    top: 5px;
    left: 378px;
  }
  #navbarNav {
    background-color: white;
    opacity: 1;
    color: white;
  }
  #showcase {
    z-index: 0;
  }

标签： htmlcsstwitter-bootstrapmedia-queries

html - 如何让汉堡图标顺滑跟随浏览器？

问题描述

解决方案

推荐阅读