我一直在练习一些 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;
}