【问题标题】：css transition how to make mouseout effectcss过渡如何制作鼠标移出效果
【发布时间】：2019-03-26 12:00:35
【问题描述】：
我正在想办法让黑色斑点在您将光标拖离它时顺利返回。更好的是，我想知道是否有可能使用 css 使 blob 从左到右消失。另外，您是否知道如何使文本在 blob 越过它们时变为白色？非常感谢您的帮助！
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
}
li a::before {
content: "";
position: absolute;
width: 0%;
height: 1.3em;
background-color: black;
visibility: hidden;
transition: width .2s;
}
li a:hover::before {
width: 100%;
visibility: visible;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="stylesheet.css">
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<ul>
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="text">text</a></li>
<li><a href="#" title="image">image</a></li>
<li><a href="#" title="slider">slider<i class="fa fa-angle-down" title="slider"></i></a></li>
<li><a href="#" title="html">html<i class="fa fa-angle-down"></i></a></li>
<li><a href="#" title="css">css</a></li>
</ul>
</nav>
</body>
</html>
【问题讨论】：
标签：
html
css
hover
css-transitions
【解决方案1】：
无需使用可见性，因为您已经将 0% 设置为宽度。您还可以调整位置以实现从左到右的转换。对于颜色，只需在 a 上添加另一个悬停声明：
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
}
li a::before {
content: "";
position: absolute;
z-index: -1;
width: 0%;
left: auto;
right: 0;
height: 1.3em;
background-color: black;
transition: width .2s, left .2s .2s, right .2s .2s;
}
li a:hover::before {
width: 100%;
left: 0;
right: auto;
}
li a:hover {
color: #fff;
}
<ul>
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="text">text</a></li>
<li><a href="#" title="image">image</a></li>
<li><a href="#" title="slider">slider<i class="fa fa-angle-down" title="slider"></i></a></li>
<li><a href="#" title="html">html<i class="fa fa-angle-down"></i></a></li>
<li><a href="#" title="css">css</a></li>
</ul>
您还可以使用渐变来简化代码：
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
background: linear-gradient(#000, #000) left/0% 100% no-repeat;
transition:
color 0.2s,
background-size 0.2s,
background-position 0.2s 0.2s;
}
li a:hover {
color: #fff;
background-size: 100% 100%;
background-position: right;
}
<ul>
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="text">text</a></li>
<li><a href="#" title="image">image</a></li>
<li><a href="#" title="slider">slider<i class="fa fa-angle-down" title="slider"></i></a></li>
<li><a href="#" title="html">html<i class="fa fa-angle-down"></i></a></li>
<li><a href="#" title="css">css</a></li>
</ul>
【解决方案2】：
我已经更新了你的 CSS 代码。希望这对您有所帮助：
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
li a::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
li a:hover:before,
li a:focus:before,
li a:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
li a:hover::before {
width: 100%;
visibility: visible;
}
li a:hover {
color: #fff;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="stylesheet.css">
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<ul>
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="text">text</a></li>
<li><a href="#" title="image">image</a></li>
<li><a href="#" title="slider">slider<i class="fa fa-angle-down" title="slider"></i></a></li>
<li><a href="#" title="html">html<i class="fa fa-angle-down"></i></a></li>
<li><a href="#" title="css">css</a></li>
</ul>
</nav>
</body>
</html>