css實現的div旋轉簡單程式碼例項

admin發表於2017-02-11
CSS

由於css3的出現，使得控制元素的功能給位強大，原來在css2中很難實現的功能，在css3中變得輕而易舉，下面就通過例項程式碼介紹一下如何實現元素的旋轉效果，程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  transform:rotate(30deg); 
  -webkit-transform:rotate(30deg);
  -o-transform:rotate(30deg);
  -ms-transform:rotate(30deg);
  -moz-transform:rotate(30deg);
  width:100px;
  height:100px;
  background:green;
  text-align:center;
  line-height:100px;
  font-size:12px;
  margin:50px;
}
</style>
</head>
<body>
<div>螞蟻部落</div>
</body>
</html>

以上程式碼實現div的旋轉，但是沒有動態效果，一下就定格在那個位置的，下面將其修改成動態的。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  animation:theanimation 5s infinite alternate;   
  -webkit-animation:theanimation 5s infinite alternate;   
  -moz-animation:theanimation 5s infinite alternate;   
  -o-animation:theanimation 5s infinite alternate;   
  -ms-animation:theanimation 5s infinite alternate ;  
   
  width:100px;
  height:100px;
  background:green;
  text-align:center;
  line-height:100px;
  font-size:12px;
  margin:50px;
}
@keyframes theanimation{ 
  0%{transform:rotate(0deg);} 
  100%{transform:rotate(30deg);} 
} 
@-webkit-keyframes theanimation{ 
  0%{-webkit-transform:rotate(0deg);} 
  100% {-webkit-transform:rotate(30deg);} 
} 
@-moz-keyframes theanimation{ 
  0% {-moz-transform:rotate(0deg);} 
  100% {-moz-transform:rotate(30deg);} 
} 
@-o-keyframes theanimation{ 
  0%{-o-transform:rotate(0deg);} 
  100%{-o-transform:rotate(30deg);}  
} 
@-ms-keyframes theanimation{ 
  0%{-ms-transform:rotate(0deg);} 
  100%{-ms-transform:rotate(30deg);}  
} 
</style>
</head>
<body>
<div>螞蟻部落</div>
</body>
</html>

以上程式碼實現了動態旋轉效果。

相關文章