DWCS6教程80—如何使用CSS过渡效果面板

Adobe Dreamweaver CS6视频教程

讲师：瑞德威(赵老师)

第二十六课 使用CSS过渡效果面板

CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

所谓的css3当中的transition就是在我们改变现有css的时候出现一个过渡的效果，在dreamweaver中可以使用CSS过渡效果面板来创建和管理CSS过渡效果。

目前IE9以下的浏览器还不支持，不过火狐、谷歌、360等浏览器都可以支持。

1、打开CSS过渡效果面板

a、窗口菜单——CSS过渡效果

2、创建CSS过渡效果

a、展开CSS过渡效果面板，点击上面的加好+。

b、在跳出的对话框里面设置相应的CSS过渡效果即可。

1）目标规则：即应用到哪个CSS规则上面去
2）过渡效果开启：相当于触发过渡效果的事件：比如常用的：hover鼠标放上去的时候
3）对所有属性使用相同的过渡效果/对每个属性使用不同的过渡效果
4）持续时间、延迟、计时功能：
值 描述
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1之间的数值。
5）属性：添加过渡效果的属性，比如宽度和高度的变化。
6）结束值：既是原值到结束值的过渡变化。