html - Css Transition 未按预期工作

Question

我真的可以在我的 CSS 代码中使用一些帮助。

我正在尝试制作我的 <h1>使用 transition 改变颜色和形状属性(property)。

当我将鼠标悬停在标题上时，我希望形状和颜色缓慢变化， 但目前只有颜色受到影响，形状会独立变化。

我的代码如下:

HTML :

<h1 class="box">Abcdefg</h1>

样式:

.box {
      background: #2db34a;
      margin: 1px auto;
      transition: background 1s linear;
      border-radius: 0.3%;
      color: white;
      cursor: pointer;
      height: 95px;
      line-height: 95px;
      text-align: center;
      width: 400px;
    }

.box:hover {
      background: #ff7b29;
   border-radius: 50%;
}

谢谢。

Answer 1

你只需要添加border-radius到你的transition

.box {
  background: #2db34a;
  margin: 1px auto;
  transition: background 1s linear, border-radius 1s linear;
  border-radius: 0.3%;
  color: white;
  cursor: pointer;
  height: 95px;
  line-height: 95px;
  text-align: center;
  width: 400px;
}

.box:hover {
  background: #ff7b29;
  border-radius: 50%;
}

<h1 class="box">Abcdefg</h1>