0

我一直在练习一些 CSS，通过制作一些翻转按钮并使用，-webkit但我听说-webkit它只与 chrome 和 safari 兼容。因此，如果我想让动画在其他浏览器上运行，我应该添加什么代码？这是我的代码：

html:

    <!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="main.css">
    <title>Rollover buttons</title>
</head>
<body>
    <article>   
        <p id="button">Button!</p>
    </article>
</body>
</html>


body{
    text-align:center;
}
#button{
    display:block;
    border:2px solid green;
    margin:150px 400px;
    background:#604085;
    color:#ffffff;
    width:100px;
    height:50px;
    -webkit-border-radius:30px;
    -webkit-transition:background 0.5s,width 0.5s, height 0.5s;
}
#button:hover{
    background:#67e456;
    width:110px;
    height:60px;
}
4

4 回答 4

2 
transition: opacity 0.5s linear; /* vendorless fallback */
-o-transition: opacity 0.5s linear; /* opera */
-ms-transition: opacity 0.5s linear; /* IE 10 */
-moz-transition: opacity 0.5s linear; /* Firefox */
-webkit-transition: opacity 0.5s linear; /*safari and chrome */

您想了解供应商前缀。这是一个带有注释的简单不透明过渡的示例。

在这里查看最新的浏览器支持 - http://caniuse.com/

于 2012-09-24T15:06:00.283 回答
1

您还可以使用图像精灵进行翻转，如下所示：

.button {
background-image: src(../images/soandso.jpg);
background-image: top left;
width: 45px;
height: 15px;
}

.button:hover {
background-image: src(../images/soandso.jpg);
background-image: bottom left;
width: 45px;
height: 15px;
}

然后你可以使用 jQuery 来实现淡入效果或任何你想要完成的事情。

于 2012-09-24T15:12:46.927 回答
0

如果你想保证跨浏览器的兼容性，此时最好不要使用 CSS3 动画，而是使用 jQuery Effects 之类的东西来为你做这件事。

于 2012-09-24T15:02:15.397 回答
0

正如@BoltClock 指出的那样，-webkit是供应商前缀。但是，其他供应商对动画的支持数量有限，我预计随着动画受到 W3 的关注/正式化，这种支持会增加。

请注意，过渡（您的 CSS 显示）和动画（由标题引用）包含一组不同的前缀和 W3 文档。

于 2012-09-24T15:07:53.097 回答