html - CSS 悬停属性

<分区>

我正在尝试制作一个圆形边框的动画，它在您悬停时变为方形，并在您悬停后变回圆形。尽管我尽了最大的努力，但我似乎无法让它发挥作用。这是我目前所拥有的。

@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;
}

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

最佳答案

你把它复杂化了，只需使用 transition像这样:

.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%;
}

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

关于html - CSS 悬停属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48671035/

上一篇：html - W3C 不验证视口(viewport)

下一篇：html - 如何在 bulma 中切换选项卡

相关文章：

html - IE css 按钮外边框

ios - 使用按钮更改标签

html - 将鼠标悬停在 li 标签上时打开 div

css - Twitter Bootstrap 列布局问题

javascript - 删除类后元素消失

html - awk 多行非贪婪匹配解决方法

使用 chrome/safari 影响其他元素的 CSS3 变换

javascript - 样式选择选项最佳实践

ios - 同一个按钮使用选择器执行多个功能并更新 iOS Objective-C 中的按钮文本

javascript - 如何获取Div组件onclick事件中的textnode