.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怎麼實現呢
