css3透明度与过度属性

html-css034

css3透明度与过度属性,第1张

opacity:x    x值为0~1,值越小越透明,在ie低版本的不支持

filter:alpha(opacity=x)  x值为0~100,值越小越透明, ie低版本支持filter:alpha(opacity=x)

background: rgba():也可以改变透明度,a的值为0~1,值为1时完全不透明

transition呈现的是一种过渡,是一种动画转换的过程,如渐现、渐弱、动画快慢等

过渡属性( transition-property ):transition-property 过渡或动态模拟的CSS属性,property:指定的CSS属性(width、height、background-color属性等)all:指定所有元素支持transition-property属性的样式,一般为了方便都会使用all

过渡所需的时间( transition-duration ):定义转换动画的时间长度,即从设置旧属性到换新属性所花费的时间,单位为秒(s)

过渡动画函数( transition-timing-function ):指定浏览器的过渡速度,以及过渡期间的操作进展情况,通过给过渡添加一个函数来指定动画的快慢方式

transition-delay 过渡开始出现的延迟时间

练习:

linear  规定以相同速度开始至结束的过渡效果

ease    规定慢速开始,然后变快,然后慢速结束的过渡效果(默认值)

ease-in 规定以慢速开始的过渡效果 (一开始会很慢 后面快结束的时候会加快)

ease-out    规定以慢速结束的过渡效果 (一开始会很快 后面快结束的时候会变慢)

ease-in-out 规定以慢速开始和结束的过渡效果

过渡延迟时间( transition-delay )正值:元素过渡效果不会立即触发,当过了设置的时间值后才会被触发 2s

负值:元素过渡效果会从该时间点开始显示,之前的动作被截断 速度会变快 -2s 会出现卡顿

0:默认值,元素过渡效果立即执行

调整元素定位时重叠层的上下位置

z-index属性值:整数,默认值为0

设置了position属性时,z-index属性可以设置各元素之间的重叠高低关系,z-index值大的层位于其值小的层上方

总结:网页中的元素都含有两个堆叠层级,未设置绝对定位时所处的环境,z-index是0,设置绝对定位时所处的堆叠环境,此时层的位置由z-index的值确定,改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序,只需调整绝对定位层的z-index值即可。

1、创建一个html文件。

2、在html文件找到一个<body>标签,在这个标签里创建一个<div>标签并添加一个类,在这把这个类设置为:rgba。

代码:<div class="rgba"></div>

3、为div添加样式。在<title>标签后面创建一个<style>,在<style>标签里设置rgba类的高和背景透明度的样式(rgba(R,G,B,A))。透明度参数,取值在0~1之间,不可为负值,透明度参数越小透明度越高。

代码:

<style type="text/css">

.rgba{

background-color: rgba(0,0,0,0.5)

height: 200px

}

</style>

4、保存后使用浏览器查看。可以看到当透明度为由0.1修改为1时div背景由灰色变为了黑色。

5、所有代码。可以把所有代码复制到新建的html文件上,保存好后使用浏览器打开借口看到效果。

所有代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>css设置背景透明</title>

<style type="text/css">

.rgba{

background-color: rgba(0,0,0,0.5)

height: 200px

}

</style>

</head>

<body>

<div class="rgba"></div>

</body>

</html>

在一些网站的登录页面上,经常可以发现,一张图片叠加在另一张图片上,底层的图片若隐若现,利用css中的透明属性opacity可以实现这种效果,下面就简单介绍一下怎么写代码

新建一个HTML文件,下载两张图片,如下图,放在一个文件夹中,避免出现路径问题

代码示例如下,主要利用css伪元素::before,F_box为前置层,浮于背景上方

下面简单分解下代码,分为1,2,3,第一部分,设置背景图片001.jpg;第三部分,固定前置层图片002.jpg的位置;第二部分,利用伪元素::before,设置属性opacity来调节透明度,取值为0-1,0是全透明,即看不见的效果,1是全不透明

代码示例中,设置opacity为0.5,半透明状态,实际页面效果如下