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隨機產生花瓣的位置和花瓣的旋轉和選取花瓣的圖片。