我正在参加「初夏创意投稿大赛」详情请看:初夏创意投稿大赛
嗨!大家好!我是手可摘棉花,一名前端开发,很开心在这里分享文章,期待着大家的点赞👍与关注➕。
简介
端午节快到了,画个快乐的小粽子送给大家,纯css实现的粽子动画,本文主要使用了html+css来实现,css3实现动画,爱心放大缩小渐变透明,小手动画旋转角度,小脚也是一样。下面来给大家详细介绍一下整个制作的过程。
代码块
代码介绍
本文的小粽子动画效果分成两部分完成,一是完成小粽子跟爱心绘制,二是完成爱心跟小粽子欢快走路动画。
1.小粽子+爱心绘画
小粽子制作分成粽子外形+粽叶+手+脚+眼睛+嘴巴+腮红;爱心是左边画两个,右边画三个。
1.1 粽子外形
粽子外形可看到的是一个比较圆滑的三角形,如果用三角形来画行不通,所以我画了一个三角形,再画了三个半圆旋转一下贴合过去,定位拼接起来,仔细调节一下就好。
html:
<!-- 粽子外形 -->
<div class="zongzi">
<div class="round1"></div>
<div class="round2"></div>
<div class="round3"></div>
</div>
样式:
.zongzi{
width: 0;
height: 0;
border-left: 120px solid transparent;
border-right: 120px solid transparent;
border-bottom: 200px solid #FFEDC8;
position: relative;
}
.round1,.round2,.round3{
width: 238px;
height: 43px;
background: #FFEDC8;
border: 2px solid;
border-radius: 100% 100% 0 0/100px 100px 0 0;
transform: rotate(-59deg);
position: absolute;
left: -198px;
top: 67px;
z-index: -1;
}
.round2{
left: -48px;
top: 64px;
transform: rotate(59deg);
z-index: -2;
width: 229px;
}
.round3{
left: -126px;
top: 193px;
transform: rotate(180deg);
z-index: -3;
width: 236px;
}
1.2 粽叶
粽叶是两瓣叶子绑在一起的,先画左边,最后实现右边的。实现方法用了圆角调节一下弧度,贴合过去,添加颜色,最后再画几条线上去实现。同理,右侧粽叶也是同样方法实现。
html:
<!-- 粽叶 -->
<div class="ruoye">
<div class="ruoye-left">
<div class="line1 line1-bg"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
</div>
<div class="ruoye-right">
<div class="line1 line1-bg"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
</div>
</div>
样式:
.ruoye{
position: absolute;
}
.ruoye{
position: relative;
}
.ruoye-left{
width: 234px;
height: 128px;
background: #87D15D;
border-radius: 0 0px 288px 86px/0 0 205px 103px;
transform: rotate(22deg);
position: absolute;
top: -79px;
left: -12px;
z-index: 2;
}
.ruoye-left::after{
content: "";
position: absolute;
right: -30px;
top: 36px;
background: #87D15D;
width: 112px;
height: 33px;
border-radius: 0 0 344px 326px/0 0 185px 211px;
transform: rotate(-51deg);
}
.ruoye-left .line1,
.ruoye-left .line2,
.ruoye-left .line3,
.ruoye-left .line4{
width: 234px;
height: 2px;
background: #49912C;
position: absolute;
top: -2px;
left: 3px;
z-index: 1;
}
.ruoye-left .line1-bg{
background: #333;
height: 3px;
}
.ruoye-left .line2{
width: 242px;
top: 28px;
left: -2px;
}
.ruoye-left .line3{
width: 233px;
top: 53px;
left: -2px;
}
.ruoye-left .line4{
width: 211px;
top: 76px;
left: -2px;
}
.ruoye-right{
width: 100px;
height: 124px;
background: #87D15D;
border-radius: 0 0px 93px 66px/0 0 125px 70px;
transform: rotate(-24deg);
position: absolute;
right: -1px;
top: -102px;
}
.ruoye-right .line1,
.ruoye-right .line2,
.ruoye-right .line3,
.ruoye-right .line4{
width: 98px;
height: 2px;
background: #49912C;
position: absolute;
top: -2px;
left: 3px;
z-index: 1;
}
.ruoye-right .line1-bg{
background: #333;
height: 3px;
}
.ruoye-right .line2{
width: 92px;
top: 20px;
left: 9px;
}
.ruoye-right .line3{
width: 92px;
top: 40px;
left: 9px;
}
.ruoye-right .line4{
width: 92px;
top: 60px;
left: 9px;
}
1.3 眼睛+腮红+嘴巴
眼睛比较简单就是画了两个椭圆里面白色的小椭圆;腮红也是椭圆,里面是三条线;嘴巴是半椭圆,里面小椭圆。用几个用的圆角样式比较多。
html:
<!-- 眼睛 -->
<div class="eye"></div>
<div class="eye eye-right"></div>
<!-- 腮红 -->
<div class="shy">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<div class="shy shy-right">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<!-- 嘴巴 -->
<div class="mouth">
<div class="round"></div>
</div>
样式:
/* 眼睛 */
.eye{
width: 20px;
height: 24px;
background: #27211C;
border-radius: 60%;
position: absolute;
top: 44px;
left: 80px;
}
.eye-right{
left: 136px;
}
.eye::after{
content: "";
position: absolute;
right: 5px;
top: 8px;
width: 5px;
height: 7px;
background: #FCF9F8;
border-radius: 50%;
}
/* 腮红 */
.shy{
width: 24px;
height: 15px;
background: #FD8070;
border-radius: 50%;
position: absolute;
top: 73px;
left: 56px;
}
.shy-right{
top: 73px;
left: 152px;
}
.shy .line1,
.shy .line2,
.shy .line3{
width: 2px;
height: 7px;
background: #FEAC99;
border-radius: 60%;
position: absolute;
left: 6px;
top: 4px;
}
.shy .line2{
left: 11px;
}
.shy .line3{
left: 16px;
}
/* 嘴巴 */
.mouth{
width: 19px;
height: 28px;
background: #FABC9D;
border: 2px solid #2A160E;
border-radius: 2px 16px 37px 13px/2px 8px 47px 40px;
position: absolute;
top: 73px;
left: 107px;
overflow: hidden;
}
.mouth .round{
width: 18px;
height: 20px;
background: #FA756A;
border-radius: 38%;
position: absolute;
top: 10px;
left: 0;
}
1.4 手+脚
手跟脚的实现类似原理,都是画了线条,再画个椭圆拼接在尾巴。
html:
<!-- 手 -->
<div class="hand hand-left">
<div class="round"></div>
</div>
<div class="hand hand-right">
<div class="round"></div>
</div>
<!-- 脚 -->
<div class="leg leg-left"></div>
<div class="leg leg-right"></div>
样式:
/* 手 */
.hand{
width: 3px;
height: 80px;
background: #2A160E;
transform: rotate(-52deg);
position: absolute;
left: 25px;
top: 12px;
z-index: -3;
}
.hand .round{
width: 14px;
height: 18px;
background: #2A160E;
border-radius: 0px 28px 12px;
position: absolute;
left: -14px;
top: -13px;
z-index: 2;
transform: rotate(155deg);
}
.hand-right{
left: 200px;
top: -19px;
transform: rotate(27deg);
}
.hand-right .round{
transform: rotate(-92deg);
left: 2px;
}
/* 脚 */
.leg{
width: 3px;
height: 80px;
background: #2A160E;
transform: rotate(3deg);
position: absolute;
left: 112px;
top: 202px;
z-index: -3;
}
.leg::after{
content: "";
width: 27px;
height: 15px;
background: #2A160E;
border-radius: 60%;
position: absolute;
left: -1px;
bottom: -4px;
z-index: 2;
transform: rotate(-3deg);
}
.leg-right{
left: 166px;
top: 183px;
transform: rotate(-36deg);
}
.leg-right::after{
transform: rotate(-4deg);
}
1.5 粽子的阴影
html:
<div class="z-shadow"></div>
样式:
.z-shadow{
width: 220px;
height: 16px;
background: #CECECE;
border-radius: 60%;
position: absolute;
top: 271px;
left: 25px;
z-index: -4;
}
1.6 爱心
画爱心一开始是想到了画了正方形,再画两个圆形拼接定位过去成爱心形状,但是看起来比较规矩。所以我后面选择画了两个椭圆拼接的,因为爱心是有黑色边框的,所以画的椭圆重叠部分是有黑色线条,画了红色遮罩着黑色重叠部分的线条。
html:
<!-- 心 -->
<div class="i-heart i-heart-pos1">
<div class="i-heart-l"></div>
<div class="i-heart-r"></div>
<div class="mask"></div>
</div>
<div class="i-heart i-heart-pos2">
<div class="i-heart-l"></div>
<div class="i-heart-r"></div>
<div class="mask"></div>
</div>
<div class="i-heart i-heart-pos3">
<div class="i-heart-l"></div>
<div class="i-heart-r"></div>
<div class="mask"></div>
</div>
<div class="i-heart i-heart-pos4">
<div class="i-heart-l"></div>
<div class="i-heart-r"></div>
<div class="mask"></div>
</div>
<div class="i-heart i-heart-pos5">
<div class="i-heart-l"></div>
<div class="i-heart-r"></div>
<div class="mask"></div>
</div>
样式:
.i-heart{
position: relative;
transform: rotate(-20deg);
}
.i-heart::before{
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: #F1D6D5;
position: absolute;
left: -44px;
top: -17px;
z-index: 5;
}
.i-heart-l,.i-heart-r{
position: absolute;
top: -30px;
left: -50px;
width: 42px;
height: 80px;
background: #FF5E46;
border: 2px solid #120105;
border-radius: 60%;
transform: rotate(-31deg);
}
.i-heart-r{
top: -28px;
left: -29px;
transform: rotate(15deg);
width: 42px;
height: 74px;
}
.i-heart .mask{
position: absolute;
left: -38px;
top: -15px;
width: 28px;
height: 57px;
background: #FF5E46;
border-radius: 60%;
}
.i-heart .mask::after{
content: "";
position: absolute;
left: 8px;
top: 40px;
width: 24px;
height: 20px;
background: #FF5E46;
border-radius: 60%;
}
.i-heart-pos1{
transform: rotate(-41deg);
top: -91px;
left: -28px;
z-index: -4;
}
.i-heart-pos2{
transform: rotate(-41deg) scale(0.7);
top: -273px;
left: -88px;
}
.i-heart-pos2::before,
.i-heart-pos3::before,
.i-heart-pos4::before,
.i-heart-pos5::before{
left: -2px;
}
.i-heart-pos3{
top: -222px;
left: 70px;
transform: rotate(30deg) rotateY(180deg) scale(0.7);
z-index: -4;
}
.i-heart-pos4{
top: -150px;
left: 110px;
transform: rotate(30deg) rotateY(180deg) scale(0.4);
z-index: -4;
}
.i-heart-pos5{
top: -44px;
left: 71px;
transform: rotate(30deg) rotateY(180deg) scale(0.7);
}
2.动画效果
本文给爱心跟小粽子加了动画效果。
2.1 爱心放大动画
样式:
/* 爱心动画 */
.i-heart-pos1{
animation: blow 0.8s ease-in-out infinite alternate;
transform-origin: right center;
}
@keyframes blow{
0%{
top: -135px;
left: -17px;
transform: rotate(-28deg) scale(1);
opacity: 0.5;
}
100%{
top: -150px;
left: 17px;
transform: rotate(-28deg) scale(1.2);
opacity: 1;
}
}
.i-heart-pos2{
animation: blow2 0.8s ease-in-out infinite alternate;
transform-origin: center center;
}
@keyframes blow2{
0%{
top: -273px;
left: -88px;
transform: rotate(-41deg) scale(0.7);
opacity: 0.5;
}
100%{
top: -288px;
left: -70px;
transform: rotate(-41deg) scale(0.8);
opacity: 1;
}
}
.i-heart-pos3{
animation: blow3 0.8s ease-in-out infinite alternate;
transform-origin: center center;
}
@keyframes blow3{
0%{
top: -222px;
left: 70px;
transform: rotate(30deg) rotateY(180deg) scale(0.7);
opacity: 0.5;
}
100%{
top: -232px;
left: 57px;
transform: rotate(30deg) rotateY(180deg) scale(0.8);
opacity: 1;
}
}
.i-heart-pos4{
animation: blow4 0.8s ease-in-out infinite alternate;
transform-origin: center center;
}
@keyframes blow4{
0%{
top: -150px;
left: 110px;
transform: rotate(30deg) rotateY(180deg) scale(0.4);
opacity: 0.5;
}
100%{
top: -155px;
left: 104px;
transform: rotate(30deg) rotateY(180deg) scale(0.5);
opacity: 1;
}
}
.i-heart-pos5{
animation: blow5 0.8s ease-in-out infinite alternate;
transform-origin: center center;
}
@keyframes blow5{
0%{
top: -44px;
left: 71px;
transform: rotate(30deg) rotateY(180deg) scale(0.7);
opacity: 0.5;
}
100%{
top: -54px;
left: 62px;
transform: rotate(30deg) rotateY(180deg) scale(0.8);
opacity: 1;
}
}
2.2 手跟脚动画
手跟脚动画用css3的rotate
旋转属性实现的,想要控制一个基点固定住的东西用transform-origin: right bottom;
这个属性去实现的。粽子身体要有跳动走路的效果,也需要给整个粽子加一下旋转跟y轴移动幅度的动画才行。
样式:
/* 手动画 */
.hand-left{
animation: reach 0.75s ease-in-out infinite alternate;
transform-origin: right bottom;
}
@keyframes reach{
0%{
transform: rotate(-52deg);
}
100%{
transform: rotate(-152deg);
}
}
.hand-right{
animation: reach2 0.75s ease-in-out infinite alternate;
transform-origin: left bottom;
}
@keyframes reach2{
0%{
transform: rotate(27deg);
}
100%{
transform: rotate(134deg);
}
}
/* 脚动画 */
.leg-left{
transform-origin: center top;
animation: jump 0.75s ease-in-out infinite alternate;
}
@keyframes jump{
0%{
top: 202px;
transform: rotate(3deg);
}
100%{
top: 188px;
transform: rotate(-12deg);
}
}
.leg-right{
transform-origin: center top;
animation: jump2 0.75s ease-in-out infinite alternate;
}
@keyframes jump2{
0%{
top: 183px;
transform: rotate(-36deg);
}
100%{
top: 203px;
transform: rotate(-3deg);
}
}
.zongzi-body{
animation: jump3 0.75s ease-in-out infinite alternate;
}
@keyframes jump3{
0%{
transform: rotate(-10deg) translateY(0);
}
100%{
transform: rotate(-6deg) translateY(-15px);
}
}
总结
本文主要介绍了快乐的小粽子动画实现的流程,本文使用最多的是圆角,定位,旋转,还有伪类遮挡效果。以上就介绍到这里,欢迎大家来学习,感谢观看,谢谢,觉得还不错给个赞支持一下~~ 😛 ❥(^_-)