这是一个非常简单的问题,但我找不到关于 CSS 转换属性的很好的文档。这是 CSS 片段:
.nav a
{
text-transform:uppercase;
text-decoration:none;
color:#d3d3d3;
line-height:1.5 em;
font-size:.8em;
display:block;
text-align:center;
text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
-webkit-transition: text-shadow .2s linear;
-moz-transition: text-shadow .2s linear;
-o-transition: text-shadow .2s linear;
transition: text-shadow .2s linear;
}
.nav a:hover
{
color:#F7931E;
text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}
正如您所看到的,过渡属性正在相互覆盖。按照目前的情况,文本阴影将产生动画,但颜色不会。我如何让它们同时动画?感谢您的任何答复。
在所有支持转换的浏览器中,转换属性均以逗号分隔:
.nav a {
transition: color .2s, text-shadow .2s;
}
ease
是默认的计时函数,因此您不必指定它。如果你真的想要linear
,您需要指定它:
transition: color .2s linear, text-shadow .2s linear;
这开始变得重复,所以如果您要在多个属性中使用相同的时间和计时函数,最好继续使用不同的时间和计时函数transition-*
属性而不是简写:
transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)