html5 - 花瓣散落效果怎么写 怎么生成好多花瓣

Question

.swiper-wrapper .swiper-slide:nth-of-type(1) {
    background: url("../img/p1_bg.jpg");
    background-size: 100% 100%;
}
.swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(1){
    position: absolute;
    top: 35%;
    left: 4%;
    animation: rotate_flower1 4s linear infinite;
}
.swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(2){
    position: absolute;
    top: 23%;
    left: 45%;
    animation: rotate_flower2 4s linear infinite;
}
.swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(3){
     position: absolute;
     top: 32%;
     left: 33%;
    animation: rotate_flower2 4s linear infinite;
 }
.swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(4){
    position: absolute;
    top: 46%;
    left: 43%;
    animation: rotate_flower3 4s linear infinite;
}
.swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(5){
    position: absolute;
    top: 38%;
    left: 77%;
    animation: rotate_flower2 4s linear infinite;
}
.swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(6){
    position: absolute;
    top: 31%;
    left: 48%;
    animation: rotate_flower1 4s linear infinite;
}
.swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(7){
    position: absolute;
    top: 26%;
    left: 28%;
    animation: rotate_flower3 4s linear infinite;
}
.swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(8){
    position: absolute;
    top: 35%;
    left: 67%;
    animation: rotate_flower3 4s linear infinite;
}
.swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(9){
     position: absolute;
     top: 25%;
     left: 89%;
    animation: rotate_flower2 4s cubic-bezier(.2,0,.1,0) infinite;
 }
.swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(10){
    position: absolute;
    top: 33%;
    left: 75%;
    animation: rotate_flower1 4s linear infinite;
}
@keyframes rotate_flower1{
     to{
         transform: rotate(359deg);
         top: 78%;
     }
 }
@keyframes rotate_flower2{
    to{
        transform: rotate(359deg);
        top: 92%;

    }
}
@keyframes rotate_flower3{
    to{
        transform: rotate(359deg);
        top: 86%;
        opacity: 0;
    }
}

我现在是一个一个写的
很挫啊
而且不能有很多花瓣 很多花瓣是怎么在只有几个的情况下无限生成 不用canvas能实现么
或者 用canvas怎么实现呢

Answer 1

找几张花瓣的图片，js控制旋转不同的角度不就好了

Answer 2

layabox,phaser,粒子效果

Answer 3

多张花瓣的图片，用js随机生成花瓣的位置和花瓣的旋转和选择花瓣的图片。