嗨，大家好，我是小棉花，一名前端开发，很开心在这里分享文章。如果您喜爱我的文章，欢送点赞➕关注❤️。
简介
明天次要解说的内容是摇晃的小红花，布局是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;用来管制动画须要固定基点在那里，比较简单，入手写起来。
本文参加了思否技术征文，欢送正在浏览的你也退出。