html5 - 花瓣散落效果怎么写 怎么生成好多花瓣
问题描述
.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怎么实现呢
问题解答
回答1：找几张花瓣的图片，js控制旋转不同的角度不就好了
回答2：layabox,phaser,粒子效果
回答3：多张花瓣的图片，用js随机生成花瓣的位置和花瓣的旋转和选择花瓣的图片。
相关文章：
1. windows误人子弟啊2. php传对应的id值为什么传不了啊有木有大神会的看我下方截图3. python - linux 下用wsgifunc 运行web.py该如何修改代码4. python - oslo_config5. 关于mysql联合查询一对多的显示结果问题6. 实现bing搜索工具urlAPI提交7. 冒昧问一下，我这php代码哪里出错了？？？8. mysql优化 - MySQL如何为配置表建立索引？9. MySQL主键冲突时的更新操作和替换操作在功能上有什么差别(如图)10. 数据库 - Mysql的存储过程真的是个坑！求助下面的存储过程哪里错啦，实在是找不到哪里的问题了。
网公网安备