Chrome CSS过渡+文字阴影问题

时间:2013-10-07 08:19:31

标签: css css3 google-chrome webkit transition

a {
    transition: text-shadow, 0.5s, ease;
    display: block;
    padding: 20px 0px 20px 0px;
    color: #fff;
    text-shadow:  #343434 1px 1px 1px;
    text-decoration: none;
}

a:hover {
    color: #fff;
    text-shadow:
        #343434 1px 1px 1px,
        0 0 10px #fff,
        0 0 20px #fff,
        0 0 30px #fff,
        0 0 40px #ff00de,
        0 0 70px #ff00de,
        0 0 80px #ff00de,
        0 0 100px #ff00de,
        0 0 150px #ff00de;  
    text-decoration: none;
}

转换+文本阴影与firefox完美无瑕,但不使用chrome,任何人都知道如何解决这个问题?

请用firefox然后chrome打开以下链接,你会看到差异;

http://jsfiddle.net/tfKE8/

感谢您的帮助!

PS:我试过-webkit-transition,它不会工作

1 个答案:

答案 0 :(得分:5)

语法中可能存在错误,请尝试不使用逗号:

transition: text-shadow 0.5s ease;

这样可以在Chrome 30.0.1599.69中实现平滑过渡。