CSS3过渡

来源：互联网发布：如何选择床垫知乎编辑：程序博客网时间：2024/04/27 15:19

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
<style type="text/css">
div{
margin:50px;
width:90px;
height:60px;
font-family:sans-serif;
text-align:center;
line-height:60px;
background-color:#91E22C;
border-radius:15px;
opacity:0.3;
transition: width 1s, height 1s,opacity 1s,background-color 1s;
-moz-transition:width 1s, height 1s,opacity 1s,background-color 1s, -moz-transform 1s;/* Firefox 4 */
-o-transition:width 1s, height 1s,opacity 1s,background-color 1s, -o-transform 1s;/* Opera */
-webkit-transition: width 1s, height 1s,opacity 1s,background-color 1s, -webkit-transform 1s;/* Safari and Chrome */

}
div:hover{
opacity:1;
width:120px;
height:90px;
background-color:#1EC7E6;
transform:rotate(360deg);
-moz-transform:rotate(360deg);/* Firefox 4 */
-o-transform:rotate(360deg);/* Opera */
-webkit-transform:rotate(360deg);/* Safari and Chrome */
}
</style>
</head>
<body>
<div>
css3过度
</div>
</body>
</html>

1 0