html - 鼠标悬停在链接上时的 css 宽度过渡

Question

我在样式 anchor 上使用过渡时遇到问题。

它应该扩展到更高的宽度并显示一个字形。我试过 width max-width 但我想我错过了一些东西。字形图标有效，但“动画”宽度无效。

html:

<a class="link" href="/"> Order <a/>

CSS:

a.link {      
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
 transition: max-width 1000ms ease-in-out;
 -webkit-transition: max-width 1000ms ease-in-out;
 -moz-transition: max-width 1000ms ease-in-out;    
}

a.link:hover {
    padding: 10px 40px;
    max-width: 100%;
}

a.link:hover:after {
    font-family: icomoon;
    content: "\e903";
    color: #ffffff;
    font-size: 20px;          
}

https://jsfiddle.net/Lg7kutpp/

Answer 1

您的代码不工作，因为它没有工作宽度。由于填充，它正在改变大小，因此 transition:max-width 将不起作用。

修复代码的简单方法是添加 transition:all。

检查这个:

a.link {      
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
 transition: all 1s ease-in-out;
 -webkit-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;    
}

a.link:hover {
    padding: 10px 40px;
    max-width: 100%;
}

a.link:hover:after {
    font-family: icomoon;
    content: "\e903";
    color: #ffffff;
    font-size: 20px;          
}

<a class="link">Order></a>

如果您只想使用宽度属性的过渡，您应该向 anchor 类添加 display:inline-block 和宽度属性。

a.link {      
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
width: 100px;  
 display: inline-block;
text-align: center;
padding: 10px 15px;
 transition: width 1s ease-in-out;
 -webkit-transition: width 1s ease-in-out;
 -moz-transition: width 1s ease-in-out;    
}

a.link:hover {
    padding: 10px 40px;
    width: 150px;
}

a.link:hover:after {
    font-family: icomoon;
    content: "\e903";
    color: #ffffff;
    font-size: 20px;          
}

<a class="link">Order</a>