Question

我试图为圆形边框设置动画，当你悬停时它会变成正方形，并在你取消悬停后回到圆圈。尽管我付出了最大努力，但我似乎无法使其发挥作用。这是我到目前为止所做的。

＆＃13;

@keyframes mymove {
  from {
    border-radius: 100% 100%;
  }
  to {
    border-radius: 0px, 0px;
  }
}

@keyframes mymoveback {
  from {
    border-radius: 0px 0px;
  }
  to {
    border-radius: 100%, 100%;
  }
}

.testButt {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove 3s;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation: mymoveback 3s;
  animation-fill-mode: forwards;
}

.testButt:hover {
  -webkit-animation-fill-mode: forwards;
  animation: mymove 2s;
  animation-fill-mode: forwards;
}

＆＃13;

<br><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div class="testButt">
  <br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Log In
</div>

＆＃13;

Answer 1

您过度复杂化，只需使用transition，如下所示：

＆＃13;

.testButt {
  width: 100px;
  height: 100px;
  padding:40px 0;
  text-align:center;
  box-sizing:border-box;
  background: red;
  position: relative;
  border-radius: 50%;
  transition: 0.5s;
}

.testButt:hover {
  border-radius: 0%;
}

＆＃13;

<div class="testButt">
  Log In
</div>

＆＃13;

Answer 2

这样的事情：

HTML：

<button>Hover Me!</button>

和CSS：

button {
  display: block;
  width: 60px;
  height: 60px;
  text-decoration: none;
  padding: 5px;
  border: 1px solid red;
  border-radius: 30px;
  transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000)
}

button:hover {
  border-radius: 0;
}

链接到小提琴： Hover and round animation

CSS unhover属性

2 个答案: