純CSS做一個吃豆人動畫

我們先來看看將要實現的效果：

  

可以單擊這個鏈接打開查看效果和代碼：https://codepen.io/sd237720488/pen/LMyNxJ

 

接下來我們來看看怎么實現的，首先它可以分為兩個部分，“吃豆人”和“豆子”

首先HTML部分長這樣：

<div class="pac-man">
  //上半圓
  <div class="half">
    <div class="circle"></div>
  </div>
  //下半圓
  <div class="half half-bottom">
    <div class="circle bottom"></div>
  </div>
  //豆子
  <div class="little-circle"></div>
  <div class="little-circle"</div>
  
</div>

 

一、吃豆人部分：

吃豆人由兩個半圓組成，先來實現上面的半圓。

首先繪制一個圓

//css部分:
1 .circle{
  width:50px;
  height:50px;
  border-radius:50%;        
}

接着將圓截掉一半，構成上面的半圓：

.half{
  height:25px;
  width:50px;
  overflow:hidden;    
}

這樣一個半圓就形成了，那么如何讓半圓動起來呢？這里用到的是animation。

.half{
    animation:rotate 1s ease infinite;
    transform-origin: 50% 100%;
}

@keyframes rotate{
     50%{
        transform:rotate(-45deg);
    }  
     100%{
        transform:rotate(0deg);
    }  
}

下面的圓也差不多是這樣實現的。

值得注意的是，下方的圓使用transform:translateY(-50%);將圓向上移動50%，截到的半圓就是下半圓了。

兩個圓的transform-origin也是不同的。

另外，動畫效果里的-45deg則要變成45deg。

 

二、豆子部分：

 

首先我們來分析一下，豆子們的起始位置和終點應該是一致的，而速度也應該是相同的。也就是說，所有豆子（雖然我這里只有兩顆，但是你們也可以酌情增加豆子數量）路程、時間、速度都一樣，那不同的是什么呢？是它們的出發時間

在豆子1還未被吃豆人吃到時，豆子2就應該出發了。倘若豆子1的總運動時間為1秒，豆子2的運動時間也應該為1秒，但是，豆子2應該延遲0.5s，在豆子1運動到一半的時候，豆子2出發。這樣就可以造成不斷有豆子可以吃的假象了（(*^__^*) 嘻嘻……

.little-circle:nth-of-type(3) {
  animation: walk-left 1s infinite linear;//這里做的是勻速直線運動
}

.little-circle:nth-of-type(4) {
  animation: walk-left 1s infinite linear 0.5s ;
}

最后呢，再為豆子的透明度設置變化，出發時是透明的，被吃的時候不透明，造成一個由遠到近的假象。

@keyframes walk-left{
  0%{
    opacity:0;
  }
  100%{
    left:15px;
    opacity: 1;
  }
}