CSS3旋轉大風車效果詳解

admin發表於2018-08-11
CSSS3

分享一段程式碼例項，它實現了大風車效果，滑鼠懸浮可以不停的旋轉。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
*{
  padding:0px;
  margin:0px;
  list-style:none;
}
ul{
  width:2px;
  height:2px;
  position:absolute;
  left:30%;
  top:30%;
  transform-origin: 15px 15px;
}
li{
  width:100px;
  height:100px;
  border-radius:50%;
  position:absolute;
  transform-origin: 15px 15px;
  box-shadow:-48px 20px 0px 0px rgba(255,0,0,0.3) inset;
}
li:nth-child(1){
  transform: translateX(0px) rotate(0deg);
}
li:nth-child(2){
  transform: translateX(0px) rotate(60deg);
}
li:nth-child(3){
  transform: translateX(0px) rotate(120deg);
}
li:nth-child(4){
  transform: translateX(0px) rotate(180deg);
}
li:nth-child(5){
  transform: translateX(0px) rotate(240deg);
}
li:nth-child(6){
  background-color:transparent;
  transform: translateX(0px) rotate(300deg);
}
ul:hover{
  animation:rotate 0.5s infinite linear;
}
@keyframes rotate {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
</style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
*{
  padding:0px;
  margin:0px;
  list-style:none;
}

進行簡單的初始化操作。

將所有元素的內邊距和外邊距設定為0，並且將去掉列表元素的預設修飾。

[CSS] 純文字檢視 複製程式碼
ul{
  width:2px;
  height:2px;
  position:absolute;
  left:30%;
  top:30%;
  transform-origin: 15px 15px;
}

寬高只有2px，但並不重要，因為並沒有設定overflow:hidden，不會妨礙子元素顯示。

設定其為絕對定位，然後利用left和top屬性將其放置於指定位置。

transform-origin設定設定元素transform變換的原點位置，旋轉的時候圍繞此點。

[CSS] 純文字檢視 複製程式碼
li{
  width:100px;
  height:100px;
  border-radius:50%;
  position:absolute;
  transform-origin: 15px 15px;
  box-shadow:-48px 20px 0px 0px rgba(255,0,0,0.3) inset;
}

li元素規定了風車各個元件（類似於月牙）。

因為是絕對定位，且left和right採用預設值，那麼6個li會重疊在一起。

transform-origin設定的原點為和ul的相同，非常重要，可以保證旋轉的時候是圍繞一箇中心均衡旋轉。

最後通過box-shadow將li元素設定為類似於月牙的元件。

[CSS] 純文字檢視 複製程式碼
li:nth-child(1){
  transform: translateX(0px) rotate(0deg);
}
li:nth-child(2){
  transform: translateX(0px) rotate(60deg);
}

為了節省篇幅，只貼出了設定兩個li的CSS程式碼。

不旋轉的話，6個li是重疊的；給每一個li旋轉指定角度，那麼就實現了360度均勻分佈。

又由於它們的原點相同，那麼6個li是圍繞一個點分佈的。

為了便於理解，大家可以刪除若干li來檢視效果，比如只保留兩個：

a:3:{s:3:\"pic\";s:43:\"portal/201808/11/004719fka85z6vin8kuan5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

[CSS] 純文字檢視 複製程式碼
ul:hover{
  animation:rotate 1s infinite linear;
}

滑鼠懸浮，實現風車不間斷旋轉效果。

二.相關閱讀：

（1）.絕對定位參閱CSS position:absolute 絕對定位一章節。

（2）.transform-origin參閱CSS3 transform-origin一章節。

（3）.border-radius參閱CSS3 border-radius一章節。

（4）.box-shadow參閱CSS3 box-shadow一章節。

（5）.:nth-child()參閱CSS E:nth-child(n)偽類選擇器一章節。

（6）.transform參閱CSS3 transform一章節。

（7）.animation參閱CSS3 animation一章節。

（8）.@keyframes參閱CSS3 @keyframes一章節。

相關文章