过渡 - 淡出和webkit语法

时间:2016-07-07 20:50:45

标签: html css transition

此按钮正常淡入,但不再褪色,而不是在它上面徘徊 此外,为了在野生动物园工作,需要做些什么?

这是我的代码:

.iob:hover {
    text-shadow: 0 0 10px green;
    transition: .25s;
    transition-duration: 0.25s;
    transition-timing-function: ease-in-out;
}
.iob {
  cursor: pointer;
  margin-left: 30px;
  padding: 8px 18px;
  color: #52AEC9;
}
<a href="https://www.google.com/?gws_rd=ssl" style="text-decoration:none;" target="_blank">
       <p class="iob">Information</p>
        </a>

谢谢!

3 个答案:

答案 0 :(得分:0)

您的过渡应该像这样添加到主类

.iob {
    cursor: pointer;
    margin-left: 30px;
    padding: 8px 18px;
    color: #52AEC9;
    transition: .25s;
    transition-duration: 0.25s;
    transition-timing-function: ease-in-out;
}

答案 1 :(得分:0)

.iob:hover {
    text-shadow: 0 0 10px green;
}
.iob {
  cursor: pointer;
  margin-left: 30px;
  padding: 8px 18px;
  color: #52AEC9;
  /*transition: 2.5s;*/
  transition-duration: 2.5s;
  transition-timing-function: ease-in-out;
}
<a href="https://www.google.com/?gws_rd=ssl" style="text-decoration:none;" target="_blank">
       <p class="iob">Information</p>
        </a>
你可以写过渡:2.5s轻松进出;或转换持续时间......

我的持续时间更长,所以你可以更好地看到它。在safari 9.x中工作正常。 如果您想了解更多有关过渡的信息,请访问css-tricks.com,您需要了解所有相关信息。 https://css-tricks.com/almanac/properties/t/transition/

答案 2 :(得分:0)

<强>解:

您需要将transition属性更改为元素的正常状态。

<强>说明

我之前已经解释过这篇文章中的不同之处:

What is the difference between applying CSS transition property in hover rather than in its normal state?

侧面注意:

我建议您删除<a>标记中的内联样式,并在CSS外部文件中设置样式,以便更好地维护和分离关注点。执行以下操作:

替换:

style="text-decoration:none;"

使用:

.iob-anchor,
.iob-anchor:hover{
  text-decoration: none;  
}

CODE SNIPPET

&#13;
&#13;
.iob-anchor,
.iob-anchor:hover{
text-decoration: none;  
}

.iob {
  cursor: pointer;
  margin-left: 30px;
  padding: 8px 18px;
  color: #52AEC9;
  transition: .25s;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
}

.iob:hover {
  text-shadow: 0 0 10px green;
}
&#13;
<a class="iob-anchor" href="https://www.google.com/?gws_rd=ssl" target="_blank">
  <p class="iob">Information</p>
</a>
&#13;
&#13;
&#13;