我正在参加 码上掘金体验活动，详情：show出你的创意代码块
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情。
嗨！大家好！我是手可摘棉花，一名前端开发，很开心在这里分享文章，期待着大家的点赞与关注➕。
介绍
今天主要讲解的内容是摇摆的小红花,布局是html+css布局再加上css3动画效果,本文新加一个知识点transform-origin想必看到并不陌生吧,该属性用来设置动画旋转元素的基点位置,比如本文需要小花运动摇摆动画,需要固定小花的顶部中间的基点位置,这样小花才能正常的左右摇摆,如果没有这个样式,默认的是中间摇摆,看起来就会很怪.
代码块
code.juejin.cn/pen/7087517…
代码介绍
主要是小花的制作,底部蓝色就暂时代表是草坪吧,下面来讲讲小花布局代码实现过程.
小花代码:花瓣+眼睛+嘴
花瓣实现是用不同圆角和rotate旋转属性再定位不同角度连接在一起组成.
<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;,用来控制动画需要固定基点在那里,比较简单,动手写起来.感谢大家观看,谢谢~
