如何从左到右为下划线设置动画? [英] How to animate underline from left to right?
本文介绍了如何从左到右为下划线设置动画?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试从uber.design网站复制此过渡:
I am trying to replicate this transition from uber.design site:
问题是我被困在逆转过渡中:
The thing is that i am stuck at reversing the transition:
.un {
display: inline-block;
}
.un:after {
content: '';
width: 0px;
height: 2px;
display: block;
background: black;
transition: 300ms;
}
.un:hover:after {
width: 100%;
<span class="un">Underlined Text</span>
推荐答案
您可以使用渐变并延迟调整background-position
以获得这种效果:
You can use gradient and adjust background-position
with a delay to obtain such effect:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000, #000);
background-position: 0 100%; /*OR bottom left*/
background-size: 0% 2px;
background-repeat: no-repeat;
transition:
background-size 0.3s,
background-position 0s 0.3s; /*change after the size immediately*/
}
.un:hover {
background-position: 100% 100%; /*OR bottom right*/
background-size: 100% 2px;
}
<span class="un">Underlined Text</span>
如果要在悬停时连续播放动画,可以尝试以下操作:
In case you want a continuous animation on hover you can try this:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000, #000);
background-position: right -100% bottom 0;
background-size: 200% 2px;
background-repeat: no-repeat;
}
.un:hover {
background-position: left -100% bottom 0;
transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>
您可以检查以下答案,以获取有关如何计算不同值的更多详细信息:在背景位置上使用百分比值线性渐变
You can check this answer for more details about how the calculation of the different value is done: Using percentage values with background-position on a linear-gradient
另一种动画
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(to right, #000 33%,transparent 33% 66%,#000 66%);
background-position: right bottom;
background-size: 300% 2px;
background-repeat: no-repeat;
}
.un:hover {
background-position: left bottom;
transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>
让我们不要忘记基本的一个:
let's don't forget the basic one:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000,#000);
background-position: right bottom; /* OR left bottom*/
background-size: 100% 2px;
background-repeat: no-repeat;
transition: background-size 0.5s;
}
.un:hover {
background-size: 0% 2px;
}
<span class="un">Underlined Text</span>
这篇关于如何从左到右为下划线设置动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文