小編給大家分享一下如何使用CSS實(shí)現(xiàn)一個(gè)吃豆人的Loading加載效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供靖安網(wǎng)站建設(shè)、靖安做網(wǎng)站、靖安網(wǎng)站設(shè)計(jì)、靖安網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、靖安企業(yè)網(wǎng)站模板建站服務(wù)，十年靖安做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

實(shí)現(xiàn)吃豆人的大嘴巴

先來(lái)實(shí)現(xiàn)左邊的大嘴巴，我是用了兩個(gè)這種形狀的東西，完后給下面的那個(gè)margin-top:-50px，它倆就實(shí)現(xiàn)了重疊，之后用動(dòng)畫(huà)效果，讓上面順時(shí)針旋轉(zhuǎn)，下方與之相反，旋轉(zhuǎn)90°就可以實(shí)現(xiàn)嘴巴張開(kāi)合上的動(dòng)作了。

    width: 0px;
    height: 0px;
    border-right: 25px solid transparent;
    border-top: 25px solid #279fcf;
    border-left: 25px solid #279fcf;
    border-bottom: 25px solid #279fcf;
    border-radius: 25px;

旋轉(zhuǎn)動(dòng)畫(huà)分別是：

@keyframes rotate_pacman_up {
  0% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); }

  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); }

  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); } 
}

@keyframes rotate_pacman_down {
  0% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); 
     }

  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
      }

  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
       } 
}

之后將動(dòng)畫(huà)加到我們剛剛生成的那兩個(gè)元素的css中即可（運(yùn)用這個(gè)屬性就行：animation），因?yàn)槲沂?code>div套了div，所以我用的是偽元素來(lái)選擇的：分別是first-of-type和nth-child(2)，選中了第一個(gè)跟第二個(gè)div來(lái)作為吃豆人的嘴巴。

要注意的是，兩個(gè)嘴巴的動(dòng)畫(huà)時(shí)間要同步，否則這個(gè)嘴可就上下亂竄了：

    animation: rotate_pacman_up 0.75s 0s infinite

現(xiàn)在的效果是這樣的：

實(shí)現(xiàn)吃豆人的豆子

同樣，我們?cè)趧倓偟膬蓚€(gè)div同級(jí)的地方，又建了三個(gè)div，我真是太喜歡div了~

萬(wàn)物皆可div！??！

豆子相對(duì)于嘴巴來(lái)說(shuō)就很簡(jiǎn)單，首先他是圓的，其次呢，它的動(dòng)畫(huà)是向左移動(dòng)的，具備這兩個(gè)條件，就可以了。我們直接使用偽元素選中3、4、5三個(gè)div，加上這段css即可。

    background-color: #279fcf;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    width: 10px;
    height: 10px;
    position: absolute;
    transform: translate(0, -6.25px);
    top: 25px;
    left: 100px;

會(huì)不會(huì)有人問(wèn)：為什么你就知道定位的時(shí)候是-6.25px呢？，最后解釋最后解釋。

接下來(lái)加上向左移動(dòng)的動(dòng)畫(huà)：

@keyframes pacman-balls {
  75% {
    opacity: 0.7; }

  100% {
    -webkit-transform: translate(-100px, -6.25px);
            transform: translate(-100px, -6.25px); } 
}

似乎，要是走一段變得透明一些是不是會(huì)更好？這個(gè)有待考慮~

最后將動(dòng)畫(huà)分別用選擇器掛到第3、4、5個(gè)div上就行啦，同時(shí)要注意，動(dòng)畫(huà)的起始時(shí)間不要設(shè)置成一樣的，否則它們就同步啦?。?！我這里設(shè)置的分別是0.33/0.66/0.99秒哦~ 就像這樣：

    animation: pacman-balls 1s 0.33/0.66/0.99s infinite linear

看一下最終效果吧~

關(guān)于那個(gè)-6.25px

其實(shí).....我研究了好半天，我把圖給大家，要是能算出來(lái)也幫我算算，我最后是實(shí)驗(yàn)出來(lái)的，6到7都差不多，但是6.25更順眼一些emmm，但是實(shí)驗(yàn)到7px的時(shí)候，小圓的圓心就有點(diǎn)明顯偏上了，所以emm就6.25吧（差不多~，還有就是我想寫(xiě)6.5的，但是總覺(jué)得6.25好聽(tīng)點(diǎn)emm）。

看完了這篇文章，相信你對(duì)“如何使用CSS實(shí)現(xiàn)一個(gè)吃豆人的Loading加載效果”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞名稱(chēng)：如何使用CSS實(shí)現(xiàn)一個(gè)吃豆人的Loading加載效果
網(wǎng)址分享：http://aaarwkj.com/article24/iihsje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、動(dòng)態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、用戶(hù)體驗(yàn)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)