Trung tâm cá nhân
sách gpt4 ai đã đi

html - 过渡方向 - 边界

In lại 作者：行者123 更新时间：2023-11-28 02:34:45 34 4
mua khóa gpt4 Nike

我在设置过渡时遇到问题，目前它是从上到下(它是悬停时显示的边框)。我希望过渡从中间开始并传播到侧面，或者至少从任何一侧开始并传播到另一侧...

我的导航菜单 anchor 使用导航链接类!

* {
  margin: 0px;
  font-family: Futura;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  color: white;
}

thân hình {
  background-image: url("../Media/body-bg.png");
}

/* NOTE: Class */

.navigation-box {
  height: 60px;
  width: 100%;
  background-color: MediumSeaGreen;
  position: fixed;
  z-index: 1;
  min-width: 800px;
}

.navigation-menu {
  margin: 6px 15px;
  float: bên trái;
  color: white;
}

.navigation-link {
  padding: 6px 10px;
  font-weight: 100 !important;
  font-size: 23px;
  padding-bottom: 12px;
  text-decoration: none;
  border-bottom: 0px solid DarkGreen;
  transition: left 2s, all ease-in-out 300ms;
}

.navigation-link:hover {
  color: Wheat;
  border-bottom: 3px solid DarkGreen;

}

.vline {
  border-left: 2px solid white;
  padding-bottom: 6px;
  margin: 0px 0px 0px 10px;
}


  <đầu>
    Cabinet Psychologie | 15ème
    
  

  
    

      

        Accueil
        Cours
        Plans
        Plus

所以如果你知道一种方法让它工作，我们将不胜感激

1 Câu trả lời

您可以考虑使用伪元素来创建边框。首先，您在左/右属性中设置 50%，然后在悬停时将两者都切换为 0，这将创建您想要的效果:

* {
  margin: 0px;
  font-family: Futura;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  color: white;
}

thân hình {
  background-image: url("../Media/body-bg.png");
}


/* NOTE: Class */

.navigation-box {
  height: 60px;
  width: 100%;
  background-color: MediumSeaGreen;
  position: fixed;
  z-index: 1;
  min-width: 800px;
}

.navigation-menu {
  margin: 6px 15px;
  float: bên trái;
  color: white;
}

.navigation-link {
  padding: 6px 10px;
  font-weight: 100 !important;
  font-size: 23px;
  padding-bottom: 12px;
  text-decoration: none;
  border-bottom: 0px solid DarkGreen;
  vị trí: tương đối;
}

.navigation-link:before {
  content: "";
  vị trí: tuyệt đối;
  height: 3px;
  dưới cùng: 0;
  left: 50%;
  right:50%;
  background:DarkGreen;
  transition: all ease-in-out 300ms;
}

.navigation-link:hover {
  color: Wheat;
}
.navigation-link:hover::before,.navigation-link.active:before {
  left: 0;
  right:0;
}
.vline {
  border-left: 2px solid white;
  padding-bottom: 6px;
  margin: 0px 0px 0px 10px;
}



<đầu>
  Cabinet Psychologie | 15ème
  



  

    

      Accueil
      
      Cours
      
      Plans
      
      Plus



关于html - 过渡方向 - 边界，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48270928/

34 4 0
Bài viết được đề xuất: html - 如何获取按钮值并将其设置为 Angular/ ionic 输入
Bài viết được đề xuất: html - 将 overflow-x 应用于 CSS grid-column 元素似乎也适用 overflow-y
Bài viết được đề xuất: jquery - 如何使用正则表达式在 html 中搜索字符串并使用 jQuery 突出显示？
Bài viết được đề xuất: html - 在视频标签中隐藏下载选项
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com