嗨,大家好,我是小棉花,一名前端开发,很开心在这里分享文章。如果您喜爱我的文章,欢送点赞➕关注❤️。
简介
明天次要解说的内容是摇晃的小红花,布局是 html+css 布局再加上 css3 动画成果,本文新加一个知识点 transform-origin 想必看到并不生疏吧,该属性用来设置动画旋转元素的基点地位,比方本文须要小花静止摇晃动画,须要固定小花的顶部两头的基点地位,这样小花能力失常的左右摇摆,如果没有这个款式,默认的是两头摇晃,看起来就会很怪。
代码介绍
次要是小花的制作,底部蓝色就临时代表是草坪吧,上面来讲讲小花布局代码实现过程。
1. 小花代码: 花瓣 + 眼睛 + 嘴
花瓣实现是用不同圆角和 rotate 旋转属性再定位不同角度连贯在一起组成。
html:
<div class="head">
<div class="eye"></div>
<div class="eye eye-right"></div>
<div class="mouth"></div>
<div class="petal-con">
<div class="petal01"></div>
<div class="petal01 petal02"></div>
<div class="petal01 petal03"></div>
<div class="petal01 petal04"></div>
<div class="petal01 petal05"></div>
<div class="petal01 petal06"></div>
<div class="petal01 petal07"></div>
<div class="petal01 petal08"></div>
</div>
</div>
款式:
.head{
width: 80px;
height: 80px;
background: #EFD4C9;
border-radius: 60%;
border: 3px solid;
position: absolute;
left: 50%;
margin-left: -40px;
top: -124px;
}
.eye{
width: 6px;
height: 10px;
border-radius: 50%;
background: #000;
position: absolute;
left: 50%;
margin-left: -24px;
top: 30px;
}
.eye-right{margin-left: 16px;}
.mouth{
width: 14px;
height: 4px;
border: 3px solid #FA9A9A;
border-radius: 0 0 50% 50%/0 0 100% 100%;
border-top: none;
margin: 0 auto;
position: absolute;
top: 58px;
left: 29px;
}
.petal01{
width: 44px;
height: 72px;
background: #FA9A9A;
border-radius: 60%/50%;
border: 3px solid;
position: absolute;
top: -64px;
left: 19px;
z-index: -1;
transform: rotate(0);
}
.petal02{
top: -42px;
left: 70px;
transform: rotate(70deg);
z-index: -2;
}
.petal03{
top: 5px;
left: 85px;
transform: rotate(97deg);
z-index: -3;
}
.petal04{
top: 46px;
left: 52px;
transform: rotate(146deg);
z-index: -4;
}
.petal05{
top: 64px;
left: 10px;
transform: rotate(178deg);
z-index: -5;
}
.petal06{
top: 41px;
left: -40px;
transform: rotate(240deg);
z-index: -6;
}
.petal07{
top: -8px;
left: -53px;
transform: rotate(280deg);
z-index: -7;
}
.petal08{
top: -52px;
left: -28px;
transform: rotate(317deg);
z-index: -7;
}
2. 枝干 + 叶子
叶子外观是这样子设置 border-radius: 60% 0; 旋转一下角度跟枝干拼接在一起。
html:
<div class="branch">
<div class="leaf"></div>
<div class="leaf leaf02"></div>
</div>
款式:
.branch{
width: 8px;
height: 200px;
background: #C0F0A3;
border: 3px solid;
border-radius: 100px;
position: absolute;
left: 50%;
margin-left: -4px;
bottom: 0;
z-index: -10;
}
.leaf{
width: 25px;
height: 30px;
background: #8BC363;
border-radius: 60% 0;
border: 3px solid;
position: absolute;
left: 50%;
margin-left: 11px;
top: 86px;
transform: rotate(14deg);
}
.leaf02{
margin-left: -42px;
top: 102px;
transform: rotate(-98deg);
}
.grass{
width: 100%;
height: 40px;
background: #329A7C;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
3. 动画制作
嘴巴微笑动画
.mouth{
transform-origin: center center;
animation: smile 2s ease infinite;
}
@keyframes smile{
from{
width: 14px;
height: 4px;
top: 58px;
left: 29px;
}
to{
top: 58px;
left: 24px;
width: 24px;
height: 6px;
}
}
小花摆动
.branch{
transform-origin: bottom center;
animation: swing 2s ease infinite alternate;
}
@keyframes swing{
from{transform: rotate(-5deg);
}
to{transform: rotate(5deg);
}
}
最初成果
总结
以上就是摇晃的小花整个制作过程,学会会用属性 transform-origin: bottom center; 用来管制动画须要固定基点在那里,比较简单,入手写起来😛。
本文参加了思否技术征文,欢送正在浏览的你也退出。