纯CSS实现 | 摇摆的小花

我正在参加 码上掘金体验活动,详情: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);
    }
}

展示效果:

小花动画.gif

总结

以上就是摇摆的小花整个制作过程,学会会用属性 transform-origin: bottom center;,用来控制动画需要固定基点在那里,比较简单,动手写起来.感谢大家观看,谢谢~😛