一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情。
我正在参加 码上掘金体验活动，详情：show出你的创意代码块
嗨！大家好！我是手可摘棉花，一名前端开发，很开心在这里分享文章，期待着大家的点赞👍与关注➕。
介绍
嗨,大家好,今天来给大家介绍一下纯css实现可爱的米老鼠眨眼动画效果,本文涉及的知识点看过前面的文章应该也有所了解,html+css,css3动画效果,旋转，放大动画,眨眼动画.下面来给大家详细介绍一下整个制作的过程.
代码块
代码介绍
本文米老鼠动画分成两部分完成,一是完成米老鼠制作,二给米老鼠添加动画效果，添加的动画有眨眼动画,晒红放大缩小,小手动画效果。
1. 米老鼠制作
米老鼠制作分成头部(包括脸蛋+眼睛+腮红+嘴巴+鼻子), 耳朵 , 小手.
1.1 米老鼠的头部(包括脸蛋+眼睛+腮红+嘴巴+鼻子)
这部分占用的内容比较多,米老鼠的脸蛋是由三个三个不同形状的椭圆形组成的,眼睛,鼻子也是椭圆画的,嘴巴是高度很小的圆形调节弧度比较弯曲的,腮红则是粉扑扑的圆形组成.
html:
<div class="mickey">
<div class="head">
<div class="face">
<div class="round01"></div>
<div class="round02"></div>
<div class="round03"></div>
</div>
<div class="eye eye-left"></div>
<div class="eye eye-right"></div>
<div class="nose"></div>
<div class="mouth"></div>
<div class="shy"></div>
<div class="shy shy-right"></div>
</div>
</div>
样式:
.mickey{
position: relative;
}
.head{
width: 140px;
height: 136px;
border-radius: 48%;
background: #1D1518;
}
.face .round01{
width: 124px;
height: 70px;
background: #FFEEE2;
border-radius: 70%;
position: absolute;
bottom: -1px;
left: 10px;
}
.face .round02{
width: 54px;
height: 60px;
background: #FFEEE2;
border-radius: 70%;
position: absolute;
top: 26px;
left: 23px;
}
.face .round03{
width: 54px;
height: 60px;
background: #FFEEE2;
border-radius: 70%;
position: absolute;
top: 26px;
right: 23px;
}
.eye{
width: 20px;
height: 24px;
border-radius: 50%;
background: #1D1518;
position: absolute;
top: 63px;
left: 39px;
}
.eye::after{
content: "";
position: absolute;
top: 5px;
left: 6px;
background: #fff;
width: 4px;
height: 5px;
border-radius: 50%;
}
.eye-right{
left: 82px;
}
.nose{
width: 14px;
height: 8px;
border-radius: 50%;
background: #1D1518;
position: absolute;
left: 64px;
top: 90px;
}
.mouth{
width: 26px;
height: 6px;
border: 3px solid #1D1518;
border-radius: 0 0 50% 50%/0 0 100% 100%;
border-top: none;
margin: 0 auto;
position: absolute;
top: 112px;
left: 55px;
}
/* 腮红 */
.shy{
width: 26px;
height: 26px;
background: #F58D8B;
border-radius: 60%;
position: absolute;
top: 86px;
left: 22px;
}
.shy-right{
left: 96px;
}
1.2 米老鼠的耳朵
米老鼠的耳朵是先画一个大圆定位到左边,复制一份定位在右边去.
html:
<div class="ear ear-left"></div>
<div class="ear ear-right"></div>
样式:
.ear{
width: 78px;
height: 78px;
border-radius: 77% 68%;
background: #1D1518;
position: absolute;
left: -21px;
top: -31px;
z-index: -1;
}
.ear-right{
left: 92px;
}
1.3 米老鼠的小手
米老鼠的小手是椭圆形,通过旋转一下高度,定位到头部下面,用z-index:-1;定位到头部的底层.
html:
<div class="hand hand-left"></div>
<div class="hand hand-right"></div>
样式:
.hand{
width: 27px;
height: 50px;
background: #000;
border-radius: 60%;
position: absolute;
left: 35px;
bottom: -19px;
transform: rotate(27deg);
z-index: -1;
}
.hand-right{
left: 70px;
bottom: -3px;
transform: rotate(-39deg);
}
2. 米老鼠动画效果
米老鼠动画效果包括米老鼠眨眨眼动画, 米老鼠腮红动画, 米老鼠小手动画.
2.1 米老鼠眨眼动画
米老鼠眨眼动画通过控制高度变化还有高度位置,高度挺重要的,如果不设置这个,那么变化高度的时候,就是下面直接向上眨眼,就不会有上下一起动着眨眼的效果.
样式:
.eye{
animation: wink 0.4s linear infinite alternate;
}
@keyframes wink{
0%{
height: 2px;
top: 74px;
}
100%{
height: 24px;
top: 63px;
}
}
2.2 米老鼠腮红动画
米老鼠腮红动画是通过控制腮红就是圆形放大缩小的动画,设置这个值 transform: scale(0.6);里面数字的大小.
样式:
.shy{
animation: enlarge 0.5s linear infinite alternate;
}
@keyframes enlarge{
0%{
transform: scale(0.6);
}
100%{
transform: scale(1);
}
}
2.2 米老鼠小手动画
米老鼠小手动画是先做左边的动画,因为左右两边的位置跟角度不同,需要设置东西比较多,需要设置基点,来调节旋转的角度transform: rotate(48deg);让小手张开得顺畅一些.右侧的同理.
样式:
.hand-left{
transform-origin: 35px -19px;
animation: reach 0.4s ease infinite alternate;
}
@keyframes reach{
0%{
transform: rotate(48deg);
}
100%{
left: 35px;
bottom: -19px;
transform: rotate(27deg);
}
}
.hand-right{
transform-origin: 35px -5px;
animation: reach2 0.4s ease infinite alternate;
}
@keyframes reach2{
0%{
left: 62px;
transform: rotate(-70deg);
}
100%{
left: 70px;
bottom: -3px;
transform: rotate(-39deg);
}
}
总结
本文主要介绍了米老鼠制作跟动画流程,文中使用的圆形,椭圆形比较多,绝对位置的定位,位置的层级关系,还有动画的旋转角度,放大缩小属性的使用.以上内容介绍到这里,感谢观看,期待大家的点赞与支持,谢谢~
