我试图在鼠标悬停时制作一个按钮动画,初始状态下该按钮将仅显示一个图标,悬停后将扩展其宽度,然后显示其中的文本。
我无法添加预定义的最大宽度、宽度或宽度值,因为我不知道文本的长度,因为它是从后端服务呈现的。
我已经添加了一些CSS代码,但它不能正常工作。 我需要的流程如下 -
- 初始状态下显示带图标的按钮
- 悬停后,按钮的宽度将扩展到文本的长度
- 然后显示按钮内的文本
.sti_container{
position: relative;
}
.btn{
position: relative;
display: inline-block;
padding: 15px;
background-color: blue;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
color: #fff;
border-radius: 25px;
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
.btn .btn-text{
width: 0;
display: inline-block;
-webkit-transition: color 2s;
transition: color 2s;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
color: blue;
}
.btn:hover .btn-text{
width: auto;
color: white;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="sti_container">
<button class="btn">
<span class="btn-icon"><i class="fa fa-shopping-bag" aria-hidden="true"></i></span>
<span class="btn-text">Shop the image here to click and open</span>
</button>
</div>
max-width: 99999px
,这样您就不会有超过该长度的文本 :) - Mr Ttransition: color 2s 2s, max-width 2s;
。 - Mr T