纯css动画实现撒花

“我正在参加 码上掘金体验活动，详情：show出你的创意代码块”

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

思路就是先画出花瓣，通过定位position调整每个花瓣的位置，就画出1朵花，再画多个花的样式，再添加动画效果

其中一朵花的样式

/*div布局*/
<div class="huacont">/*给这个父div就不用给每个花瓣加动画啦 看代码也更直观*/
  <span class="hb1"></span>
  <span class="hb2"></span>
  <span class="hb3"></span>
  <span class="hb4"></span>
  <span class="hb5"></span>
</div>
/*css动画效果 高度从距离上面top85%到5%,从上面撒到上面，就会实现撒花效果*/
@keyframes sh {
  0% {top:85%;}
  100% {top:5%;}
}
/*css画花的body infinite可实现不断的效果*/
.huacont {
  width: 120px;
  height: 120px;
  /*可以设置撒的时长 秒s数越小越快*/
  animation: sh .5s infinite;
  position: absolute;
  bottom: 30%;
  left: 40%;
}
/*一朵花的其中一朵花瓣*/
.huacont span {
  display: block;
  position: absolute;
  width: 60px;
  height: 60px;
  background: #FBC6D6;
  border-radius: 0 80px;
  transform-origin: 80% 80%;
}
/*一朵花的其中一朵花瓣*/
.huacont .hb2 {
  transform: rotate(72deg);
}

.huacont .hb3 {
  transform: rotate(144deg);
}

.huacont .hb4 {
  transform: rotate(216deg);
}
/*第5个花瓣*/
.huacont .hb5 {
  transform: rotate(288deg);
}

另一种花样式

<div class="huacontA">
  <span class="hb1"></span>
  <span class="hb2"></span>
  <span class="hb3"></span>
  <span class="hb4"></span>
  <span class="hb5"></span>
</div>
.huacontA {
  width: 60px;
  height: 60px;
  animation: sh .6s infinite;
  position: absolute;
  bottom: 20%;
  left: 58%;
}

.huacontA span {
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  background: #F27DBF;
  border-radius: 0 30px;
  transform-origin: 10% 60%;
}

.huacontA .hb2 {
  transform: rotate(72deg);
}

.huacontA .hb3 {
  transform: rotate(144deg);
}

.huacontA .hb4 {
  transform: rotate(216deg);
}

.huacontA .hb5 {
  transform: rotate(288deg);
}

下面看下效果

码上掘金 (juejin.cn)