CSS3圓形旋轉變大動畫效果

admin發表於2017-02-17
CSSS3動畫
本章節分享一段使用CSS3實現的動畫效果。

當滑鼠懸浮於圓形圖案之上的時候，會出現旋轉變大的動畫效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
body{
  font-size:14px;
  color:#333;
  font-family:"Microsoft Yahei";
}
#box{
  margin:-100px 0 0 -100px;
  top:50%;
  left:50%;
  width:200px;
  height:200px;
  line-height:200px;
  text-align:center;
  border:5px #d1d1d1 solid;
  border-radius:105px;
  box-shadow:0 0 20px #666;
  background:#eee;
  overflow:hidden;
  position:absolute;
  /*動畫部分 開始*/
  -webkit-transition: margin 1s linear,  
  width 1s linear,  
  height 1s linear,  
  font-size 1s linear,  
  line-height 1s linear,  
  color 1s linear, 
   border 1s linear,  
   border-radius 1s linear,  
   background 1s linear,  
   box-shadow 1s linear,  
   -webkit-transform 1s linear;
  -moz-transition: margin 1s linear,  
  width 1s linear,  
  height 1s linear,  
  font-size 1s linear,  
  line-height 1s linear,  
  color 1s linear,  
  border 1s linear,  
  border-radius 1s linear,  
  background 1s linear,  
  box-shadow 1s linear,  
  -moz-transform 1s linear;
  -o-transition: margin 1s linear,  
  width 1s linear,  
  height 1s linear,  
  font-size 1s linear,  
  line-height 1s linear,  
  color 1s linear,  
  border 1s linear,  
  border-radius 1s linear,  
  background 1s linear,  
  box-shadow 1s linear,  
  -o-transform 1s linear;/*動畫部分 結束*/
}
#box:hover{
  margin:-200px 0 0 -200px;
  width:400px;
  height:400px;
  font-size:26px;
  line-height:400px;
  color:#fff;
  border:5px #fff solid;
  border-radius:210px;
  background:#05a;
  box-shadow:0 0 40px #900;
  -webkit-transform:rotate(720deg);
  -moz-transform:rotate(720deg);
  -o-transform:rotate(720deg);
}
</style>
</head>
<body>
<div id="box">softwhy.com</div>
</body>
</html>

相關文章