轻松学会用CSS画超可爱卡通狮子！零基础也能get新技能

2024-04-06 技术资讯推广

怎么利用css绘制狮子动画？下面本篇文章手把手带大家一步步利用css绘制一个可爱卡通狮子动画，希望对大家有所帮助。本期我们要使用纯css来绘制出一个乖巧可爱的卡通狮子，通过这个栗子我们可以熟悉更多的css绘制技巧，相信在以后的界面绘制任务中

今天我来教大家如何使用CSS画一个超级可爱的卡通狮子喔！赶紧学起来，这样以后做界面设计也会更上一层楼啦～

狮子的组成部分

轻松学会用CSS画超可爱卡通狮子！零基础也能get新技能

这个萌狮其实很简单，就是几个零件儿拼起来的：耳朵、眼睛、鼻子、胡子、嘴巴、鬃毛、前脚和尾巴。用最基础的长方形和圆弧线，就可以画出来。比如，眼睛就是两个圆饼摞起的；其他部分都是类似的画法

利用clip-path属性

要画那些奇形怪状的东西？clip-path帮大忙！比如说狮子身体侧面是个半圆？clip-path: ellipse轻松解决。这个功能就是巧妙地画出需要展示的部分，不用的就隐藏起来。有了clip-path: ellipse在手，形状随心所欲，线条画得更畅快！

<pre class="brush:css;toolbar:false;”>.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%);
}

绘制耳朵和身体

轻松学会用CSS画超可爱卡通狮子！零基础也能get新技能

你知道，耳朵其实是一个椭圆形给剪出来哒，这个椭圆形裁剪就好像你告诉它要剪啥，不剪啥那样子，只需要输入两个参数（比如剪掉的宽度和在X-Y轴上的位置）就搞定。它的身体部分也是靠clip-path: ellipse搞成个半球形的样子。所以，现在CSS能变幻各种形状来剪东西，使得图形看起来更有趣了！

.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;
}

绘制鼻子和尾巴

轻松学会用CSS画超可爱卡通狮子！零基础也能get新技能

三角形鼻子？别担心，只需要在CSS里设置宽度和高度为0，再用 border就能画出来啦；尾部的话，只需让矩形div动起来，加个border-radius就行啦；要是想尾巴亮闪闪地动起来，试试transform-origin，把变形起点调一调，效果马上就不一样！

眼睛动画

.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;
}

想让狮子舞得更活灵活现？加点儿跳动的眼珠子！利用Clip-path属性和ellipse命令，将裁剪窗框拉到中间，稍微留点儿距离就行了。这样能防止变形，使动画更真实哟~

轻松学会用CSS画超可爱卡通狮子！零基础也能get新技能