【案例9-6】发光的按钮一、案例描述1、考核知识点animation属性2、练习目标Ø掌握animation属性的使用。Ø灵活运用animation属性实现复杂的动画。3、需求分析在传统的Web设计中,当网页中需要显示动画或特效时,需要使用JavaScript脚本或者Flash来实现。在CSS3中,提供了对动画的强大支持。在CSS3中,使用animation属性可以定义复杂的动画。本案例通过animation属性制作一个发光按钮的动画效果。4、案例分析1)按钮发光的动画,效果如图9-19所示。图9-1发光的按钮效果2)具体实现步骤如下所示:a)在Dreamweaver中定义一个span,设置其宽高、文字样式;并设置背景图片为线性渐变。b)使用@keyframes属性设置动画效果,定义动画开始和结束时的动画状态。其中,动画开始时,盒子阴影为绿色;动画结束时,盒子阴影为红色。c)使用animation属性来定义盒子阴影动画,设置播放的时间、速度曲线、次数、方向、是否循环等。
举一反三
- CSS中为Animation设置动画延迟使用____属性,设置动画次数应该使用____属性。
- css3中的动画属性及定义动画的关键字是 A: animator和@key-frames; B: animator 和 @keyframes; C: animation 和 @key-frames; D: animation 和 @keyframes;
- 在CSS3中，通过animation相关属性可以实现不同的动画效果。下列选项中，定义执行动画效果之前延迟的时间的属性是（ ）。 A: A、animation-duration属性; B: B、animation-timing-function属性; C: C、animation-delay属性; D: D、animation-direction属性;
- 下面关于微信小程序中的CSS动画说法正确的是 A: 微信小程序支持CSS3动画 B: 通过animation-play-state属性可以控制动画的状态 C: 通过animation属性可以设置动画的播放效果 D: 微信小程序中的rotate可以用来设置旋转动画效果
- 认真阅读下列代码，并按要求进行作答。imation-name:mymove; /*定义动画名称*/imation-duration:5s; /*定义动画时间*/imation-timing-function:linear; /*定义动画速度曲线*/imation-delay:2s; /*定义动延迟时间*/imation-iteration-count:3; /*定义动画的播放次数*/imation-direction:alternate; /*定义动画播放的方向*/imation属性是一个复合属性，可以同时设置上述属性的代码为（ ）。 A: animation: mymove 3 2s linear 5s alternate; B: animation: mymove linear 2s 5s 3 alternate; C: animation: mymove 2s linear 5s 3 alternate; D: animation: mymove 5s linear 2s 3 alternate;