Pac-Man ...在CSS中！

你們都知道著名的Pac-Man視頻遊戲，對嗎？該遊戲很有趣，並且在HTML中構建動畫的Pac-Man角色也很有趣！我將向您展示如何在利用剪貼路屬性的功能時創建一個。

你很興奮嗎？讓我們開始！

首先，讓我們引導項目

我們只需要兩個文件才能用於我們的項目：index.html和style.css。我們可以通過創建一個帶有內部文件的空文件夾來手動執行此操作。或者，如果您願意，我們可以將其作為使用命令行的藉口：

 Mkdir Pacman
CD Pacman
觸摸index.html && touch style.css

設置基線樣式

轉到style.css並為您的項目添加基本樣式。您也可以使用reset.css和justronize.css之類的內容來重置瀏覽器樣式，但是我們的項目簡單明了，因此我們不會在這裡做很多事情。您想做的一件事可以肯定，請使用自動瀏覽器來幫助跨瀏覽器的兼容性。

我們基本上將身體設置為視口的全部寬度和高度，並將其居中在其中的中間。諸如背景顏色和字體之類的東西純粹是美學。

 @Import url（'https://fonts.googleapis.com/css?family=slabo 27px＆display = swap'）;

*， *：之後， *：{
  盒子大小：邊框框；
}

身體 {
  背景：＃000;
  顏色：#fff;
  填充：0;
  保證金：0;
  字體家庭：“ Slabo 27px”，襯線；
  顯示：Flex;
  身高：100VH；
  Jusify-content：中心；
  準項目：中心；
}

看，html中的pacman！

您還記得Pac-Man的樣子嗎？他本質上是一個黃色的圓圈，在圓圈中開了一個嘴。他是一台二維點飲用機器！

因此，他有一個身體（還是他只是頭？）和嘴。他甚至沒有眼睛，但無論如何我們都會給他一個。

這將是我們的HTML標記：

 <div>
  <div> </div>
  <div> </div>
</div>

用CSS打扮Pac-Man

最有趣的部分開始了！轉到style.css並為pacman創建樣式。

首先，我們將創建他的身體/頭/任何東西。同樣，這只是一個具有黃色背景的圓圈：

 .pacman {
  寬度：100px;
  身高：100px;
  邊界拉迪烏斯：50％；
  背景：＃F2D648;
  位置：相對；
  保證金頂：20px;
}

他的（不存在的）眼睛幾乎是一樣的 - 一個圓圈，但較小和深灰色。我們將其絕對定位，以便我們可以將其放在需要的位置：

 .pacman__eye {
  位置：絕對；
  寬度：10px;
  身高：10px;
  邊界拉迪烏斯：50％；
  頂部：20px;
  右：40px;
  背景：＃333333;
}

現在我們有了基本的形狀！

使用剪貼式路徑吸引嘴

到目前為止，非常簡單，對嗎？如果我們的吃豆人要吃一些點（並追逐一些鬼魂），他將需要嘴。我們將創建另一個圓圈，但是這次使其變黑，並將其疊加在他的黃色頭頂上。然後，我們將使用夾子路徑屬性切出一片片 - 有點像一個空的餡餅容器，除了最後一塊派。

 .pacman__mouth {
  背景：＃000;
  位置：絕對；
  寬度：100％；
  身高：100％；
  剪輯路徑：多邊形（100％74％，44％48％，100％21％）；
}

為什麼要有多邊形和所有這些百分比？ ！ ？ ！請注意，我們已經建立了元素的寬度和高度。 polygon（）函數讓我們在元素邊界內繪製一個自由形狀的形狀，該形狀用作僅顯示元素部分的掩碼。因此，我們使用夾子路徑並告訴我們需要一個形狀（polygon（）），該形狀（polygon（））在特定位置包含一系列點（100％74％，44％48％，100％21％）。

剪輯路徑屬性可能很難掌握。 CSS-tricks年鑑有助於解釋它。還有一個很酷的Clippy應用程序，可以輕鬆繪製剪輯形狀並導出CSS，這是我為本教程所做的。

到目前為止，一切都很好：

讓吃豆人吃

我們的Pacman看起來很漂亮，但是它會更酷，但他無法咀嚼他的食物。我的意思是，也許我們想吞下他的食物，但我們不允許這樣做。讓我們張開嘴，閉上。

我們需要做的就是使剪貼儀屬性動畫，我們將使用@keyframes。我正在命名這個動畫吃：

 @keyframes吃{
  0％{
    剪輯路徑：多邊形（100％74％，44％48％，100％21％）；
  }
  25％{
    剪輯路徑：多邊形（100％60％，44％48％，100％40％）；
  }
  50％{
    剪輯路徑：多邊形（100％50％，44％48％，100％50％）；
  }
  75％{
    剪輯路徑：多邊形（100％59％，44％48％，100％35％）；
  }
  100％{
    剪輯路徑：多邊形（100％74％，44％48％，100％21％）；
  }
}

同樣，我使用Clippy應用程序來獲取值，但是，可以隨意通過自己的內容。也許，您將能夠使動畫更加順暢！

我們已經有了關鍵框架，所以讓我們將其添加到.pacman課程中。我們可以使用速記動畫屬性，但是我已經淘汰了這些屬性以使事情更加自稱，以便您看到發生了什麼：

動畫名稱：吃；
動畫效果：0.7；
動畫題計：無限；

我們去！

我們要餵食帕克曼

如果吃豆人可以刺，為什麼不給他一些食物！讓我們稍微修改HTML標記以包括一些食物：

 <div>
  <div> </div>
  <div> </div>
  <div> </div>
</div>

…然後將其定為樣式。畢竟，食物需要開胃眼睛和嘴！我們將又一個圓圈，因為這就是遊戲所使用的。

 .pacman __food {
  位置：絕對；
  寬度：15px;
  身高：15px;
  背景：#fff;
  邊界拉迪烏斯：50％；
  頂部：40％；
  左：120px;
} 

AW，可憐的Pacman看到了食物，但無法食用。讓我們用另一個CSS動畫來使食物來找他：

 @keyframes食物{
  0％{
    變換：Translatex（0）;
      不透明度：1;
  }
  100％{
    變換：Translatex（-50px）;
    不透明度：0;
  }
}

現在，我們只需要將此動畫傳遞給我們的.pacman__ food類。

動畫名稱：食物；
動畫效果：0.7；
動畫題計：無限；

我們有一個快樂的吃豆人！

像以前一樣，動畫在我的末端進行了一些調整，以使其正確。發生的事情是，食物從完全不透明度開始從Pac-Man開始，然後使用Transform：Translatex（）從左向右移動並以零不透明度消失。然後它將無限地運行，所以他每天都在吃飯！

那是一個包裹！採取這樣的小事情並查看如何使用HTML和CSS來重新創建它們很有趣。我想看看您自己的Pacman（或Pac-Man女士！）。分享評論！

以上是Pac-Man ...在CSS中！的詳細內容。更多資訊請關注PHP中文網其他相關文章！