纯CSS实现 | 风中摇摆的花儿

嗨，大家好，我是小棉花，一名前端开发，很开心在这里分享文章。如果您喜欢我的文章，欢迎点赞➕关注❤️。

简介

今天主要讲解的内容是摇摆的小红花，布局是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;用来控制动画需要固定基点在那里，比较简单，动手写起来😛。

本文参与了思否技术征文，欢迎正在阅读的你也加入。