关于前端:纯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; 用来管制动画须要固定基点在那里，比较简单，入手写起来😛。

本文参加了思否技术征文，欢送正在浏览的你也退出。