CSS3放大旋转

当前位置 : 首页 > 网页制作 > CSS > CSS3放大旋转

CSS3放大旋转

来源: 作者: 时间:2016-01-20 09:22
CSS3放大旋转实例:!DOCTYPE htmlhtml headmeta http-equiv=Content-Type content=text/html; charset=UTF-8 /titleCSS3放大旋转/titlestyle.a{transition:All 0.4s ease-in-out;-web...
CSS3放大旋转实例:
 
<!DOCTYPE >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>3放大旋转</title>
<style>
.a{
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
width:200px;
height:200px;
background-color:#008000;
display:block;
margin:100px auto;
color:#fff;
text-align:center;
line-height:200px;
font-size:20px;
font-weight:bold;
}
.a:hover {
transform:rotate(360deg) scale(1.2);
-webkit-transform:rotate(360deg) scale(1.2);
-moz-transform:rotate(360deg) scale(1.2);
-o-transform:rotate(360deg) scale(1.2);
-ms-transform:rotate(360deg) scale(1.2);
}
</style>
</head>
<body>
<a class="a">放大旋转</a>
</body>
</html>

 


Tag:

相关文章

网友评论

<