手把手帶你使用CSS繪制一個可愛卡通獅子動畫 _生活百科

怎么利用CSS繪制獅子動畫？下面本篇文章手把手帶大家一步步利用CSS繪制一個可愛卡通獅子動畫，希望對大家有所幫助。

文章插圖

本期我們要使用純css來繪制出一個乖巧可愛的卡通獅子，通過這個栗子我們可以熟悉更多的css繪制技巧，相信在以后的界面繪制任務中更加得心應手。【推薦學習：css視頻教程】
演示https://code.juejin.cn/pen/7088181155333144617
正文基礎繪制
我們在先來康康這只獅子有哪些部分組成：

文章插圖

通過以上視圖，這只獅子是由 耳朵+眼睛+鼻子+胡須+嘴巴+鬃毛+前腿+爪子+尾巴 這些部分組成。相信大家不難看出很多部位可以通過非常簡單做矩形和圓角句可以完成他們。比如眼睛，就是兩個圓形堆疊而成，具體可以看上面的代碼演示，這里對于這些基礎圖形就不做過多講述了。
接下來，我們就具體說說，一些不好繪制的圖形吧。
耳朵
可以看到它似半圓形，像是花瓣一樣，常規方法來做的話肯定是不好實現的，但可以通過 clip-path 屬性，它是使用裁剪方式創建元素的可顯示區域，其區域內的部分顯示，區域外的隱藏。而繪制耳朵，我們就利用這區域裁剪，其 ellipse 橢圓裁切的方法，其兩個傳入至分別表示其裁切的半徑，而at后的兩個值則代表裁切的x與y軸的坐標。
.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 來實現的，當然不止于此他可以裁剪出任何圖形來，可以說非常的強大了。
鼻子
鼻子是一個三角形而構成，css繪制三角形也是一個小技巧，就是把 width 與 height 設為 0，單純使用 border 屬性來完成，設置 border-width 使其代替塊的寬高，但其塊的內部是由四個小三角形拼成的矩形了，然后因為排布是上右下左的順序，所以只要給其中一個角的顏色賦值即可實現一個三角形。
.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 來實現，畫一個矩形div塊，讓他旋轉一定角度，然后只繪制其中一個邊框，然后再使用 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;}

文章插圖

動畫制作
搖尾巴
尾部的力量都源于尾巴根，所以要從根部進行一個輕微搖擺的旋轉動畫，所以，我們就利用到了 transform-origin 屬性，它可以讓你更改一個元素變形的原點，如，根部發力那么就直接設置成 transform-origin: 50% 100% 也可以寫成 transform-origin: center bottom 。
第一個參數代表了定義變形中心距離盒模型的左側的偏移值。
keywordvalueleft0%center50%right100%第二個參數代表了定義變形中心距離盒模型的頂的偏移值。
keywordvaluetop0%center50%bottom100%后面的動畫微微的旋轉偏移就看下方的代碼塊了，非常簡單只需要微調一些角度和偏移即可。這里再多補充一句，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); }}