Question

我在设置过渡时遇到了麻烦，此时它从上到下（它是你悬停时显示的边框）。我希望过渡从中间开始，扩散到一边或者至少从任何一方开始，然后传播到另一边......

我的导航菜单主播正在使用导航链接类！

＆＃13;

* {
  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;
}

＆＃13;

<!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>

＆＃13;

因此，如果您知道如何使其发挥作用，那将非常感激

Answer 1

您可以使用pseudoelement代替border。

要从中间开始，请将left或right设置为50％，并将pseudoelement的宽度设为0.转换时只需将width增加到50％，它将朝着这个方向发展。

将left或right设置从50％调整为0，然后增加width以使其跨越整个链接。

* {
  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

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

＆＃13;

std::function<void()>

＆＃13;

* {
  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;
}

＆＃13;

Answer 3

您可以通过使用：after或：之前的伪元素以及向其添加transform和transition属性来实现此目的。

＆＃13;

  .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);
}

＆＃13;

 <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>

＆＃13;

过渡方向 - 边界

3 个答案: