html - CSS 按钮动画变大

标签 html css

我在 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/

相关文章:

JQuery Mobile 像画廊一样在页面之间滑动

html - 使用 HTML 和 CSS 剪切形状

javascript - 每行仅突出显示一个单元格

html - 我需要帮助使用 Lost Grid 安排 div 位置

css - Bootstrap Col 不工作 Sm

javascript - 创建滚动到第二部分后出现的导航栏

javascript - 刷新验证码,也刷新整个注册表

php - 如何在 Twig 中显示 HTML,同时仍然修剪显示内容的长度

javascript - 向动态生成的按钮添加和删除事件类事件监听器

javascript - 为什么 Vue.js 在通过 $refs 设置值后无法更新该值