Question

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

我正在尝试使用<h1>属性更改transition颜色和形状。

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

我的代码如下：

html：

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

css：

.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

即可

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在all设置中使用transition同时影响border-radius和background-color：

＆＃13;

.box {
  background: #2db34a;
  margin: 1px auto;
  transition: all 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%;
}

＆＃13;

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

＆＃13;

Answer 3

您有下一行代码：

transition: background 1s linear;

转换仅适用于现在的背景。如果您将背景更改为所有过渡将同时适用于背景和边界半径，如下所示：

transition: all 1s linear;

Answer 4

转换仅适用于具有数字的属性。话虽如此，问题是它应该也适用于边界半径。但问题是浏览器无法找到属性的初始状态。只需添加border-radius：0％就可以了。

Answer 5

    HTML code:
<p> the code is :</p>
<h1 class="sheet">Abcdefg</h1>

   CSS Code:
css code :
.sheet {
      background: blue;
      margin: 1px auto;
      transition: background 5s linear , border-radius 5s ease-in-out ;
      color: white;
      cursor: pointer;
      height: 95px;
      line-height: 95px;
      text-align: center;
      width: 400px;
    }

.sheet:hover {
      background: red;
      color:grey;
   border-radius: 40%;

}

Css Transition未按预期工作

5 个答案: