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

我想大声告诉你2017-06-22 11:53:27 0 3 471

.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怎么实现呢

回答



3

0

分享

全部回复 (3)

伊谢尔伦2017-06-22 11:55:273楼

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

回复

过去多啦不再A梦2017-06-22 11:55:272楼

layabox,phaser,粒子效果

回复

小葫芦2017-06-22 11:55:271楼

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

回复