过渡方向 - 边界

Question

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

我的导航菜单锚使用的是导航-link class !

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

body {
  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: left;
  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;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Cabinet Psychologie | 15&egrave;me</title>
    <link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
  </head>

  <body noresize="noresize">
    <div class="navigation-box">
      <h1 class="navigation-menu">
        <a href="#" class="navigation-link" style="border-bottom: 3px solid DarkGreen;">Accueil</a><a class="vline"></a>
        <a href="./Data/Pages/cours.html" class="navigation-link">Cours</a><a class="vline"></a>
        <a href="./Data/Pages/plans.html" class="navigation-link">Plans</a><a class="vline"></a>
        <a href="./Data/Pages/plus.html" class="navigation-link">Plus</a>
      </h1>
    </div>
  </body>

</html>

因此，如果您知道使它起作用的方法，我们将不胜感激

Answer 1

您可以使用 pseudoelement 而不是 border。

要使其从中间开始，将 left 或 right 设置为 50%，并将 pseudoelement 的宽度设置为 0。在过渡时只需增加 width 到 50%，它会朝那个方向增长。

将 left 或 right 设置从 50% 调整为 0，并增加 width 使其跨越整个 link。

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

body {
  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: left;
  color: white;
}

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

.navigation-link:after {
  content: '';
  position: absolute;
  left: 50%;
  width: 0;
  bottom: 0;
  height: 2px;
  background: darkgreen;
  transition: width 300ms ease-in-out;
}

.navigation-link:hover {
  color: Wheat;
}

.navigation-link:hover:after {
  width: 50%;
}

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

<!DOCTYPE html>
<html>

<head>
  <title>Cabinet Psychologie | 15&egrave;me</title>
  <link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>

<body noresize="noresize">
  <div class="navigation-box">
    <h1 class="navigation-menu">
      <a href="#" class="navigation-link">Accueil</a>
      <a class="vline"></a>
      <a href="./Data/Pages/cours.html" class="navigation-link">Cours</a>
      <a class="vline"></a>
      <a href="./Data/Pages/plans.html" class="navigation-link">Plans</a>
      <a class="vline"></a>
      <a href="./Data/Pages/plus.html" class="navigation-link">Plus</a>
    </h1>
  </div>
</body>

</html>

Answer 2

您可以考虑使用伪元素来创建边框。首先你在 left/right 属性中设置 50% 并且在悬停时你切换到 0 这将创建你想要的效果：

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

body {
  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: left;
  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;
  position: relative;
}

.navigation-link:before {
  content: "";
  position: absolute;
  height: 3px;
  bottom: 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;
}

<!DOCTYPE html>
<html>

<head>
  <title>Cabinet Psychologie | 15&egrave;me</title>
  <link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>

<body noresize="noresize">
  <div class="navigation-box">
    <h1 class="navigation-menu">
      <a href="#" class="navigation-link active" >Accueil</a>
      <a class="vline"></a>
      <a href="./Data/Pages/cours.html" class="navigation-link">Cours</a>
      <a class="vline"></a>
      <a href="./Data/Pages/plans.html" class="navigation-link">Plans</a>
      <a class="vline"></a>
      <a href="./Data/Pages/plus.html" class="navigation-link">Plus</a>
    </h1>
  </div>
</body>

</html>

Answer 3

您可以通过使用 :after 或 :before 伪元素并向其添加转换和过渡属性来实现此目的。

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

a.navigation-link{
  position: relative;
  color: #000;
  text-decoration: none;
}

a.navigation-link:hover {
  color: #000;
}

a.navigation-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

a.navigation-link:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

 <div class="navigation-box">
  <h1 class="navigation-menu">
    <a href="#" class="navigation-link" style="border-bottom: 3px solid DarkGreen;">Accueil</a><a class="vline"></a>
    <a href="./Data/Pages/cours.html" class="navigation-link">Cours</a><a class="vline"></a>
    <a href="./Data/Pages/plans.html" class="navigation-link">Plans</a><a class="vline"></a>
    <a href="./Data/Pages/plus.html" class="navigation-link">Plus</a>
  </h1>
</div>

过渡方向 - 边界

Transition Direction - Border

html

css

transition

direction