怎么使用CSS繪制一個可愛卡通獅子動畫

這篇文章主要介紹了怎么使用CSS繪制一個可愛卡通獅子動畫的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇怎么使用CSS繪制一個可愛卡通獅子動畫文章都會有所收獲，下面我們一起來看看吧。

演示

正文

基礎(chǔ)繪制

我們在先來康康這只獅子有哪些部分組成：

通過以上視圖，這只獅子是由 耳朵+眼睛+鼻子+胡須+嘴巴+鬃毛+前腿+爪子+尾巴 這些部分組成。相信大家不難看出很多部位可以通過非常簡單做矩形和圓角句可以完成他們。比如眼睛，就是兩個圓形堆疊而成，具體可以看上面的代碼演示，這里對于這些基礎(chǔ)圖形就不做過多講述了。

接下來，我們就具體說說，一些不好繪制的圖形吧。

耳朵

可以看到它似半圓形，像是花瓣一樣，常規(guī)方法來做的話肯定是不好實現(xiàn)的， 但可以通過  clip-path 屬性，它是使用裁剪方式創(chuàng)建元素的可顯示區(qū)域，其區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。而繪制耳朵，我們就利用這區(qū)域裁剪，其 ellipse 橢圓裁切的方法，其 兩個傳入至分別表示其裁切的半徑，而at后的兩個值則代表裁切的x與y軸的坐標(biāo)。

.ear {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 10px;
    background-color: var(--skin-color);
    z-index: 9;
    border-radius: 40px;
    clip-path: ellipse(100% 100% at -20% -10%);
}

同理，那個類似于半圓的身體也是通過 clip-path: ellipse 來實現(xiàn)的，當(dāng)然不止于此他可以裁剪出任何圖形來，可以說非常的強(qiáng)大了。

鼻子

鼻子是一個三角形而構(gòu)成，css繪制三角形也是一個小技巧，就是把 width 與 height 設(shè)為 0，單純使用 border 屬性來完成，設(shè)置 border-width 使其代替塊的寬高，但其塊的內(nèi)部是由四個小三角形拼成的矩形了，然后因為排布是上右下左的順序，所以只要給其中一個角的顏色賦值即可實現(xiàn)一個三角形。

.nose {
    width: 0px;
    height: 0px;
    border-width: 20px 30px;
    border-style: solid;
    border-color: var(--eye-color) transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 40px;
    z-index: 3;
}

尾巴

尾部主要也是利用  border 來實現(xiàn)，畫一個矩形div塊，讓他旋轉(zhuǎn)一定角度，然后只繪制其中一個邊框，然后再使用  border-radius: 40% 50% , 給它彎曲的一種感覺就大功告成了。

.tail {
    width: 320px;
    height: 320px;
    position: absolute;
    top: -137px;
    border-style: solid;
    border-width: 30px;
    border-radius: 40% 50%;
    border-color: transparent var(--tail-color) transparent transparent;
    transform: rotate(125deg);
    left: -180px;
}

動畫制作

搖尾巴

尾部的力量都源于尾巴根，所以要從根部進(jìn)行一個輕微搖擺的旋轉(zhuǎn)動畫，所以，我們就利用到了 transform-origin 屬性，它可以讓你更改一個元素變形的原點，如，根部發(fā)力那么就直接設(shè)置成  transform-origin: 50% 100% 也可以寫成   transform-origin: center bottom 。

第一個參數(shù)代表了定義變形中心距離盒模型的左側(cè)的偏移值。

第二個參數(shù)代表了定義變形中心距離盒模型的頂?shù)钠浦怠?/p>

后面的動畫微微的旋轉(zhuǎn)偏移就看下方的代碼塊了，非常簡單只需要微調(diào)一些角度和偏移即可。這里再多補(bǔ)充一句，transform 的變換必須是盒模型定位的元素哦。

.tail {
  // ...
  animation: 1s wagging ease-in-out infinite alternate forwards;
  transform-origin: 50% 100%;
}

@keyframes wagging {
  0% {
    transform: rotate(125deg) translateX(0) translateY(0px);
  }
  100% {
    transform: rotate(130deg) translateX(15px) translateY(-15px);
  }
}

眨眼睛

眼睛一眨一眨會顯得獅子會更生動，但是如果通過縮小高度做動畫實現(xiàn)的畫，會顯得非常難看因為連眼白眼珠都會壓縮變形。所以我們依然是通過 clip-path 屬性，利用 ellipse 方法把裁剪范圍從頂部和底部往中間延伸，直至2%留一道縫隙即可。

.eye {
  // ...
  animation: 4s blinking infinite forwards;
  overflow: hidden;
}
@keyframes blinking {
  0%,
  40%,
  80% {
    clip-path: ellipse(100% 100% at 50% 48%);
  }
  60%,
  100% {
    clip-path: ellipse(100% 2% at 50% 48%);
  }
}

關(guān)于“怎么使用CSS繪制一個可愛卡通獅子動畫”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“怎么使用CSS繪制一個可愛卡通獅子動畫”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。