我在设置过渡时遇到问题，目前它是从上到下(它是悬停时显示的边框)。我希望过渡从中间开始并传播到侧面，或者至少从任何一侧开始并传播到另一侧...
我的导航菜单 anchor 使用导航链接类!
* {
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è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>所以如果你知道一种方法让它工作，我们将不胜感激
最佳答案
您可以考虑使用伪元素来创建边框。首先，您在左/右属性中设置 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è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>关于html - 过渡方向 - 边界，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48270928/