Question

我已经用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;
}

那么我怎样才能让我的按钮变得更慢并且看起来有点动画？

Answer 1

只需将transition用于要对其生效的元素，如果您想缩放它，则可以transform: scale()使用perspective(10px)来防止:hover的模糊效果{1}}事件https://jsfiddle.net/7tvvmrcf/

＆＃13;

.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)
}

＆＃13;

<div id="buttons">
  <a href="#" class="btn green">dance</a>
</div>

＆＃13;

Answer 2

您可以使用缩放。将transition: all .5s ease-in-out;放入慢.green css中，然后将transform: scale(1.1);放入.green:hover css中以调整按钮大小。它看起来像这样：

＆＃13;

.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 .5s ease-in-out;
}
.green:hover {
  background-color: #000;
  /*  Making button bigger on hover  */
  padding: 20px 60px;
  transform: scale(1.1);
}

＆＃13;

<div id="buttons">
  <a href="#" class="btn green">Dance</a>
</div>

＆＃13;

Answer 3

当你将鼠标悬停在按钮上时，它会变得更大或更小，而不会过渡：

＆＃13;

    .wallpaper{
      height: 200px;
      width: 200px;
      background-color:#F5F5F5
    }


    .smileyStyle{
      height: 50px;
      width: 50px;
      border-radius: 50%;
      margin-left: 10px;  
      border: 3px solid #F5F5F5;
    }

    .smileyStyle:hover{
	  border: none;
    }

＆＃13;

      <div class="wallpaper">
      <button class="smileyStyle"> :)</button>
      </div>

＆＃13;

Answer 4

根据您现有的代码和您提供的信息，只需将transition: transform,padding .5s;添加到.btn选择器即可完成此任务。

我通常更喜欢具体考虑过渡时要考虑的属性，以避免因级联而改变不需要的东西。

.btn {
    […]
    transition: transform, padding .5s;
}

.btn {
    border-radius: 5px;
    padding: 15px 55px;
    font-size: 22px;
    text-decoration: none;
    margin: 20px;
    color: #fff;
    position: relative;
    display: inline-block;
    transition: transform, padding .5s;
}

.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;
}

<div id="buttons">
    <a href="#" class="btn green">dance</a>
</div>

CSS按钮动画越来越大

4 个答案: