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

星星与水波

这一节主要涉及2个动画效果,一个是天上的星星闪烁,一个是桥下的水波左右晃动,具体可以观察右边的效果展示区域

星星部分:

布局上来说没什么难点,一共有6个div元素,背景都是同一张图片,通过left与top修改每一个div的坐标点。唯一的动画就是闪烁,实现上有3种手段

  • 传统的做法就是通过多张图交替的改变
  • 可以通过transition过渡做渐变的动画
  • 通过animation过渐变动画

水波部分:

布局上4个div元素并且每个元素赋予不同的图片,同样的也是通过absolute定位,top与left赋予坐标。水波的动作也是很简单,就是两边不断的移动,实现上也有很多方式

  • 通过定时器不断的修改left的值
  • 通过transition处理
  • 通过animation处理

区别transition与animation的使用

transition与animation用的很多,这里简单的描述下不同点,transition需要事件触发,animation可以直接自动触发,而且功能上更为强大,包括可以设置不同时间段的动画规则,还有状态的控制,事件等等。

星星与水波动画有个共同的特点

  • 不需要手动触发
  • 不断的循环变化

所以针对这个相同点,最终采用了最简单的animation处理。 星星来说可以增加一个opacity变化的的关键帧,1到0重复变化就能达到一个闪烁的效果,水波可以设定translateX变化的值,可以实现左右晃动的效果。需要注意的是,每一个元素的动画执行会有个先后循序,所以需给每一个元素分别单独设置animation-delay延时这个属性。

任务

在代码编辑器pageC.css文件中第182、188、194、200、206、212行填写animation动画使星星闪动起来

-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?