我可以通过 CSS 反转悬停时的过渡动画吗？
当我将鼠标悬停在“菜单”文本上时，我需要滑动到右侧蓝线，并在 400 毫秒延迟后从左侧灰线滑动。
是否可以？
.menu {
display: inline-block;
position: relative;
font-family: sans-serif;
font-size: 32px;
font-weight: bold;
}
.menu:before, .menu:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
height: 4px;
background-color: blue;
transform: scaleX(0);
transform-origin: right center;
transition: 500ms transform cubic-bezier(0, 0.75, 0.45, 1);
}
.menu:after {
background-color: grey;
transform: scaleX(1);
transform-origin: left center;
}
.menu:hover {
cursor: pointer;
}
.menu:hover:before {
transform: scaleX(1);
transform-origin: left center;
transition-delay: 400ms;
}
.menu:hover:after {
transform: scaleX(0);
transform-origin: right center;
}
<div class="menu">
Menu
</div>
您可以使用渐变和更少的代码轻松完成此操作。诀窍是使用左侧蓝色、右侧灰色、中间透明部分的渐变。透明部分结合background-size更改时会在两种颜色之间产生延迟background-position从左到右。
在这种情况下，我将灰色和蓝色设为25%的梯度，所以大小需要是400%覆盖100%元素宽度。
.menu {
display: inline-block;
position: relative;
font-family: sans-serif;
font-size: 32px;
font-weight: bold;
background-image:
linear-gradient(to right,blue 0,blue 25%,transparent 25%,transparent 75%,grey 75%);
background-size:400% 4px;
background-position:bottom right;
background-repeat:no-repeat;
transition:1s all;
}
.menu:hover {
background-position:bottom left;
}
<div class="menu">
Menu
</div>
这是另一个示例，如果您需要增加延迟并保持相同的持续时间，只需将透明部分放大即可：
.menu {
display: inline-block;
position: relative;
font-family: sans-serif;
font-size: 32px;
font-weight: bold;
background-image:
linear-gradient(to right,blue 0,blue 10%,transparent 10%,transparent 90%,grey 90%);
background-size:1000% 4px;
background-position:bottom right;
background-repeat:no-repeat;
transition:1s all;
}
.menu:hover {
background-position:bottom left;
}
<div class="menu">
Menu
</div>
UPDATE
根据您的评论，您可以执行以下操作：
.menu {
display: inline-block;
position: relative;
font-family: sans-serif;
font-size: 32px;
font-weight: bold;
background-image:
linear-gradient(to right,blue 0,blue 25%,transparent 25%,transparent 75%,grey 75%),
linear-gradient(to right,grey 0,grey 25%,transparent 25%,transparent 75%,blue 75%);
background-size:400% 4px,400% 0px;
background-position:bottom right,bottom left;
background-repeat:no-repeat;
transition:background-position 1s,background-size 0s 1s;
}
.menu:hover {
background-position:bottom left,bottom right;
background-size:400% 0px,400% 4px;
}
<div class="menu">
Menu
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
