按钮 CSS 转换不正常
Button CSS Transition not working properly
我有一个按钮,上面有一些文字和一个很棒的字体图标,可以在 0.5 秒内旋转 90 度,悬停时会改变颜色。我想要完成的是,当用户取消悬停按钮时,它应该需要 0.5 秒才能从 90 度旋转回到 0 度,而不是立即旋转。我想要一个平滑的过渡回到原始状态,而不是在悬停时立即。
<a href="#" class="my-button">Click Me <i class='fas fa-arrow-right' ></i> </a>
.my-button {
text-decoration: none;
color: black;
padding: .2rem;
border: 2px solid black;
transition: all 0.5s ease-in;
&:hover {
background-color: blue;
color: white;
border: 2px solid red;
}
&:hover .fas.fa-arrow-right {
transform: rotate(90deg);
transition: transform 0.5s ease 0s;
}
}
你没有指定目标 i
:
试试这个
.my-button {
text-decoration: none;
color: black;
padding: .2rem;
border: 2px solid black;
transition: all 0.5s ease-in-out;
& i{
transition: all 0.5s ease-in-out;
}
&:hover {
background-color: blue;
color: white;
border: 2px solid red;
}
&:hover .fas.fa-arrow-right {
transform: rotate(90deg);
}
}
我有一个按钮,上面有一些文字和一个很棒的字体图标,可以在 0.5 秒内旋转 90 度,悬停时会改变颜色。我想要完成的是,当用户取消悬停按钮时,它应该需要 0.5 秒才能从 90 度旋转回到 0 度,而不是立即旋转。我想要一个平滑的过渡回到原始状态,而不是在悬停时立即。
<a href="#" class="my-button">Click Me <i class='fas fa-arrow-right' ></i> </a>
.my-button {
text-decoration: none;
color: black;
padding: .2rem;
border: 2px solid black;
transition: all 0.5s ease-in;
&:hover {
background-color: blue;
color: white;
border: 2px solid red;
}
&:hover .fas.fa-arrow-right {
transform: rotate(90deg);
transition: transform 0.5s ease 0s;
}
}
你没有指定目标 i
:
试试这个
.my-button {
text-decoration: none;
color: black;
padding: .2rem;
border: 2px solid black;
transition: all 0.5s ease-in-out;
& i{
transition: all 0.5s ease-in-out;
}
&:hover {
background-color: blue;
color: white;
border: 2px solid red;
}
&:hover .fas.fa-arrow-right {
transform: rotate(90deg);
}
}