Question

我有一个可以在Chrome上运行的css代码，

   .glow {
        -webkit-animation-duration: 1s;
        -webkit-animation-name: glow;
        -webkit-animation-direction: alternate;
        -webkit-animation-iteration-count: infinite;
        animation-duration: 1s;
        animation-name: glow;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        color: white;
        font-family: 'Limelight', cursive;
        font-size: 90px;
        z-index: 555;
        padding-top:25px;
    }

    @-webkit-keyframes glow {
        from { text-shadow: 0 0 5px maroon; }
        to { text-shadow: 0 0 15px maroon; }
    }

我是css的新手，请您帮助我了解需要做些什么更改才能在Internet Explorer＆amp;火狐。

如果我在不尝试的情况下发布问题而违反SO规则，请感谢并原谅我。

JSFiddle

LAKS。

Answer 1

试试这个。我使用自动前缀来实现跨浏览器兼容性：

.glow {
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-name: glow;
            animation-name: glow;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-name: glow;
            animation-name: glow;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    color: white;
    font-family: 'Limelight', cursive;
    font-size: 90px;
    z-index: 555;
    padding-top:25px;
}

@-webkit-keyframes glow {
    from { text-shadow: 0 0 5px maroon; }
    to { text-shadow: 0 0 15px maroon; }
}

@keyframes glow {
    from { text-shadow: 0 0 5px maroon; }
    to { text-shadow: 0 0 15px maroon; }
}

IE和Firefox的css代码

1 个答案: