CSS3绚丽旋转动画效果
transform:rotate(90deg) (旋转一定角度)
transform:scale(2) (缩放倍数)
transition:2s (从一个样式变为另一个的时间,要加在原始样式上)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.mainDiv{
width:100px;
height:100px;
margin:100px auto;
text-align: center;
line-height: 100px;
font-weight: bold;
color:#ddd;
background:#ddd;
border:1px solid #ddd;
-webkit-transform:rotate(0deg) scale(1);
-moz-transform:rotate(0deg) scale(1);
transform:rotate(0deg) scale(1);
-webkit-transition:2s;
-moz-transition:2s;
transition:2s;
}
.mainDiv:hover{
color:black;
background-color:red;
-webkit-transform:rotate(720deg) scale(2);
-moz-transform:rotate(720deg) scale(2);
transform:rotate(720deg) scale(2);
}
</style>
<title>css3特效</title>
</head>
<body>
<div class="mainDiv">您好</div>
</body>
</html>