来帮同学解答一个问题
+30经验 +1积分

 

去回答
章节
问答
课签
笔记
评论
占位
占位

飘花效果的实现

飘花的效果稍微复杂一点，有一定量的JavaScript代码，通过JS+CSS3的组合实现的。观察右边效果，可以大致分解飘花的实现

  • 飘花比人物的层级都高
  • 飘花数量非常多
  • 飘花会有一定的轨迹运动
  • 飘花带有渐变的效果
  • 飘花带有旋转的效果
  • 飘花落到地面会消失

这里采用的JS+CSS3的结合实现，CSS3实现旋转部分，首先从布局上来说，飘花是要比所有内部元素层级都要高，所以布局上是要与页面li平级才可以

实现原理：

通过定时器调用JS代码不断的动态创建雪花节点，随机选择一个图片作为其背景，赋予三个初始的样式属性top,left与opacity，通过transition动画过度的方式执行这3个属性的动画变化。整个原理其实也是很简单的，主要涉及了一些细节的问题：例如元素的创建、图片的随机、开始的left与opacity的随机处理、最终值的计算等等

执行的流程：

  • getImagesName随机6张图片，snowflakeURl定义一个地址的范围
  • createSnowBox创建雪花元素的节点，并且增加一个snowRoll的样式，也就是旋转的关键帧实现
  • 定时器设置200ms不断的生成雪花对象，计算出3个属性的初始值，通过createSnowBox创建雪花元素，并且附上初始值，然后执行transition附上最终值，执行动画
  • 动画结束后执行$(this).remove()  删除这个对象

具体的实现可以参考右边的代码区域

任务

?不会了怎么办
||
1
<!DOCTYPE html
    >
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
// 动画结束事
    件
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/////////
//页面滑动 //
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
* {
padding
       : 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/*背景图*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/*背景图*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/*背景图*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后，能更快找到我哦～

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后，及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

不懂这里是怎么计算的，为什么要乘以500，5000

最新回答 / qq_与我无关N_0
这个是随机控制花瓣的运动轨迹，飘下来的时候左右运动范围随机在0~500之间，运动时间随机在0~5000ms之间
2 回答 1469 浏览
2019-02-14

endPositionTop = visualHeight - 40,为什么终点高度要减40，但是我看到的效果是花瓣是碰到底部

最新回答 / 慕粉3828920
这里设置的top、left 属性，是以图片左上角为参照点。花瓣图片高度有的是40px，有的是41px, 故要用界面高度减去图片高度，即 endPositionTop = visualHeight - 40，也可以 endPositionTop = visualHeight - 41，随你
1 回答 1351 浏览
2018-01-02

element style怎么来的

最新回答 / 慕粉3828920
里面有个setOffset方法修正了小女孩的位置
1 回答 3544 浏览
2018-01-02

为什么飘花比所有内部元素层级都高？

最新回答 / qq_粉忆天魔黑兔_0
设置index高一些
1 回答 1252 浏览
2017-12-10

为什么要写两个方括号？

最新回答 / 慕虎6411124
同求啊我也不知道为啥
2 回答 1503 浏览
2018-01-16

visualWidth和visualHeight是怎么来的？？为什么没有效果

最新回答 / 慕粉0915125030
这两个是$("#content").width()来的。这段代码藏的比较隐晦。。。你要仔细找找
1 回答 1716 浏览
2017-05-29

snowflake放在qixi.js里面动画就出不来，放在index.htm里面就可以

最新回答 / isolucky
一脸懵逼
2 回答 936 浏览
2019-07-17

怎样让小男孩贯穿3个页面，是a { position: absolute; top: 50%; left: 40%; }的作用吗？

最新回答 / qq_兀耒_0
应该是margin: 0（上下） auto（左右自适应）;position: absolute;这是定位top: 0; left: 0; right: 0;上右左为0，width: 50%宽度为屏幕的一半
1 回答 833 浏览
2017-01-12

return snowflakeURl[[Math.floor(Math.random() * 6)]];大神帮忙解释一下这个返回值

最新回答 / 慕沐8222582
对啊，那就去掉一个呗，（去掉一个也可以哦）
3 回答 935 浏览
2019-04-02

我的飘花设置起始位置和transition的值和课程中的一样了，为什么是横着飞的呢？

最新回答 / 刘健lj
<...code...>加top
2 回答 1104 浏览
2016-12-16

url改为本地地址时，为什么会报错

最新回答 / 慕沐8222582
其实写成相对路径也可以，我的就是这样
3 回答 1214 浏览
2019-04-02

飘花的本地格式怎么设置

+ 我来回答 回答最高可+2积分
4 回答 1401 浏览
2022-05-21

请问有没有整个的源代码啊？

最新回答 / qq_子腾_03370748
有的，https://github.com/Mqleaf/Practice-in-IMOOC/tree/master/0%20qixi
3 回答 853 浏览
2016-10-01

为什么我把花瓣的图片下载下来放到自己的文件里面 就是获取不到呢 ？？？

已采纳回答 / 湛瞳
把图片下载到本地，直接写图片所在的路径即可。例如： D:/文件/练习/images/2016_08_02/snowflake/snowflake1.png
3 回答 3137 浏览
2016-08-23

老师请问这个transition方法是哪里定义的啊 一直报nofunction

最新回答 / 超级无敌第一正宗驴肉火烧
原来是第三方插件额··
1 回答 1157 浏览
2016-08-23
全部 我要发布
最热 最新
只看我的

推荐课程

推荐路线系统化学习，打造阶梯学习模式

相关课程

手记推荐

更多

本次提问将花费2个积分

你的积分不足，无法发表

为什么扣积分？
确认 取消

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分？
确认 取消

账号登录 验证码登录

遇到问题
忘记密码

登录即同意慕课网《隐私政策》
代码语言