我在 html/less 中创建了一个按钮,当你将鼠标悬停在按钮上时,按钮会变大。目前它非常草率。当您将鼠标悬停在按钮上时,它会变大,但我希望它变慢并看起来有点动画效果。
这是我在 HTML 和 LESS 中的按钮代码:
HTML:
<div id="buttons">
<a href="#" class="btn green">dance</a>
</div>
CSS
.btn {
border-radius: 5px;
padding: 15px 55px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.green {
background-color: #d7d7d7;
box-shadow: 3px 5px 5px #888888;
border-radius: 2px;
}
.green:hover {
background-color: #000;
/* Making button bigger on hover */
padding: 20px 60px;
}
那么我怎样才能让我的按钮变大变慢并有一点动画效果呢?
最佳答案
只需使用 transition
对于你想要影响它的元素,如果你想缩放它你可以使用 transform: scale()
和 perspective(10px)
来防止模糊对 :hover
事件的影响 https://jsfiddle.net/7tvvmrcf/
.btn {
border-radius: 5px;
padding: 15px 55px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.green {
background-color: #d7d7d7;
box-shadow: 3px 5px 5px #888888;
border-radius: 2px;
transition: all 1s ease;
transform: scale(1);
}
.green:hover {
background-color: #000;
/* Making button bigger on hover */
transform: scale(1.5) perspective(1px)
}
<div id="buttons">
<a href="#" class="btn green">dance</a>
</div>
关于html - CSS 按钮动画变大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37357402/