怎么利用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
。 第一个参数代表了定义变形中心距离盒模型的左侧的偏移值 。
keywordvalue
left
0%
center
50%
right
100%
第二个参数代表了定义变形中心距离盒模型的顶的偏移值 。 keywordvalue
top
0%
center
50%
bottom
100%
后面的动画微微的旋转偏移就看下方的代码块了,非常简单只需要微调一些角度和偏移即可 。 这里再多补充一句,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); }}
文章插图
推荐阅读
- 衣物柔顺、软化,有它就够了→ 衣物柔顺剂使用方法
- 豌豆荚怎么用 使用豌豆荚的方法升级必备
- sockscap32怎么用?sockscap32使用教程涨知识
- 使用暴风工具激活win7系统的的处理方法? - 2020攻略资讯
- word怎么设置目录使用方向读懂您就是高手
- 小编教你使用小马激活OEM-7F7工具激活Windows7旗舰版系统教程2020新发布
- 带你了解行业 头条系产品有哪些?
- OEM7F7小马激活工具使用教程热门推荐
- 全自动洗衣机使用时注意这三种设置 全自动洗衣机怎么使用才正确
- win10系统设置让使用麦克风也能听见自己声音的解决方法为你解答