通过代码示例的跟我学应用css实现透明度rgba颜色和动画相关的应用示例.pdfVIP

目 录 杨教授工作室，版权所有，盗版必究， 1/30 页 1 1.1 CSS3 中的透明度、RGBA 颜色相关应用示例 1.1.1 CSS3 中的透明度、RGBA 颜色 1、透明度 （1）CSS3 透明…不透明…渐变 （2）opacity 属性声明用来设置一个元素的透明度 层、文字、图片等…一个 opacity 的值为 1 的元素是完全不透明的，反之，值 为 0 是完全透明的，看不见的。1 到 0 之间的任何值都表示该元素的透明程度。 （3）示例 div.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; } div.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; } div.opacityL3 { background:#036; opacity:0.6; width:575px; height:20px; } div.opacityL4 { background:#036; opacity:0.8; width:575px; height:20px; } div.opacityL5 { background:#036; opacity:1.0; width:575px; height:20px; } （4）CSS 3 透明 我们也可以在图片上使用不同透明度的透明效果，就像上面的示例一样。 一个很酷的应用是将 opacity 应用到:hover 上，实现一种链接的鼠标经过效果。 img.opacity1 { opacity:0.25; width:150px; height:100px; } 杨教授工作室，版权所有，盗版必究， 2/30 页 2 img.opacity2 { opacity:0.50; width:150px; height:100px; } img.opacity3 { opacity:0.75; width:150px; height:100px; } 2、CSS3 的 RGBA 声明 （1）RGBA 声明的主要作用 它不仅仅让我们像通常一样设置 RGB 颜色，而且还可以设置其透明度。 RGBA 像 RGB 一样设置颜色，而这个”A”——RGBA 中的最后一个值——允许 我们设置该元素的透明度（通道 Alpha）。就像 opacity 声明一样，一个 opacity 值 为 1 的元素是完全不透明的，而一个 opacity 为 0 的元素是完全透明的。 （2）CSS3 RGBA 色彩 上面的效果有以下样式实现： div.rgbaL1 { background:rgba(153, 134, 117, 0.2); height:20px; } div.rgbaL2 { background:rgba(153, 134, 117, 0.4); height:20px; } div.rgbaL3 { background:rgba(153, 134, 117, 0.6); height:20px; } div.rgbaL4 { background:rgba(153, 134, 117, 0.8); height:20px; } div.rgbaL5 { background:rgba(153, 134, 117, 1.0); height:20px; } 杨教授工作室，版权所有，盗版必究， 3/30 页 3 3、HSL 和 HSLA （1）使用 CSS3 HSL 声明同样是用来设置颜色的 HSL 声明使用色调Hue （H）、饱和度 Saturation （s）和亮度 Lightness （L）来设 置颜色。  Hu