简介:课程分为二个实例讲解,第一个实例用纯CSS3代替JavaScript实现按钮动画效果,并详细讲解CSS3新增的transition、transform等属性。第二个实例重点介绍利用<a>标签制作自适应宽度的圆角按钮。
第1章 CSS3实现“幽灵按钮”特效
通过分析幽灵按钮的实现原理,使用纯CSS3代替JavaScript实现动画效果,分析讲解动画的实现方法,并详细讲解CSS3新增的transition、transform等属性。
- 视频: 1-1 课程简介 (01:40)
- 视频: 1-2 html结构制作 (08:38)
- 视频: 1-3 渐变旋转放大动画(上) (08:17)
- 视频: 1-4 渐变旋转放大动画(下) (11:28)
- 视频: 1-5 按钮样式及基本动画实现 (14:47)
- 视频: 1-6 从左到右线条动画实现 (18:06)
- 视频: 1-7 从上到下线条动画实现 (04:46)
- 视频: 1-8 从下到上线条动画实现 (03:22)
- 视频: 1-9 从右到左线条动画实现 (03:45)
- 视频: 1-10 提示框样式制作 (13:27)
- 视频: 1-11 jq实现提示框内容显示 (18:35)
- 视频: 1-12 动画连续播放bug解决 (03:07)
第3章 用 a 标签制作按钮
重点讲解如何用<a>标签制作圆角水晶按钮。主要是告诉你如何才能给普通按钮签贴上两边圆角,如何进行贴图,交互效果如何实现。