Question

您好，我需要有关我正在制作的网站的帮助。我希望它平滑且简单，但是当我们超出限制时，我需要有关过渡的帮助。这是我的代码运行正常

.NavBar a:hover 
{
    color:rgb(120, 176, 192);
    transition: 0.5s;
}

所以我只需要帮助即可完成退出转换！谢谢你的帮助！ <3

Answer 1

您总是需要提及要转换的属性。

transition : color 0.5s ;

或者如果您希望所有财产进行过渡

transition : all 0.5s;

简而言之，过渡是

的简写属性

过渡属性

过渡时间

过渡计时功能->使您的过渡更加顺畅。

转换延迟

transition : color /*<-property*/ 0.5s /*<-duration*/ linear /*<-timing function*/ 0.5s /*<-delay*/ ;

Answer 2

您应该在锚定规则中使用transition: 0.5s;（而不是将其悬停）而不是:hover规则。

因为该规则仅适用于悬停...，所以过渡延迟被突然删除。

这是一个看起来像您的问题的代码段：

.NavBar{
  display: flex;
  padding: 1em;
  border-bottom: 1px solid black;
  width: 100%;
}

.NavBar a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  margin: 0 0.5em;
}

.NavBar a:hover {
  color: rgb(120, 176, 192);
  transition: 0.5s;
}

<div class="NavBar">
  <a href="#">test</a>
  <a href="#">test</a>
  <a href="#">test</a>
  <a href="#">test</a>
  <a href="#">test</a>
</div>

以下是过渡平滑的代码段：

.NavBar{
  display: flex;
  padding: 1em;
  border-bottom: 1px solid black;
  width: 100%;
}

.NavBar a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  margin: 0 0.5em;
  transition: 0.5s; /* Have it here ! */
}

.NavBar a:hover {
  color: rgb(120, 176, 192);
}

<div class="NavBar">
  <a href="#">test</a>
  <a href="#">test</a>
  <a href="#">test</a>
  <a href="#">test</a>
  <a href="#">test</a>
</div>

停止学习时CSS的过渡

2 个答案: