css3实现樱花飘落的效果

1. 实现思路
   樱花飘落的过程中伴随着自转，可以使用rotate进行自旋转，下落过程被风飘落，应当有x轴和y轴的偏移，使用translateX、translateY，位置偏移的坐标系如下图所示。x轴方向使用正值，将会往右移动。y轴方向使用正值，将会往下移动。

坐标

2. 代码实现
   HTML代码

<div class="bg">
   <div class="flower position1" />
</div>

CSS

.bg {
  position: relative;
}

.position1 {
    position: absolute;
    top: 0;
    left: 270px;
    animation: fallDown 3s infinite;
    animation-fill-mode: forwards;
  }

.flower {
    width: 30px;
    height: 30px;
    background: url("https://img.haomeiwen.com/i6517590/354f700a5039648f.png") no-repeat;
    background-size: contain;
  }

@keyframes fallDown {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
    opacity: 0;
  }

  100% {
    transform: translateX(-134px) translateY(134px) rotate(180deg);
    opacity: 1;
  }
}

花瓣原图如下图

花

demo地址