CSS应用:过渡

过渡用于将界面属性由1个值逐步发辗转变到另外一个值,避免界面的突然变化,这篇文章用于讲述在CSS中怎样实现过渡效果,实现CSS的属性值的平滑转变。

过渡介绍

通常,CSS的属性值的改变都是立即更新的,即从旧值立即改变到新值,而CSS的Transition属性则提供了方法帮助实现CSS属性值的平滑转换。

看下面的例子,当鼠标移入时元素的背景和前风景将立即产生变化:

HOVER
.transition {
background-color: #f1f1f1;
color: black;
}
.transition:hover {
background-color: #5b9bd1;
color: white;
}

使用transition属性则可以实现背景和前风景的变化的过渡效果,下面的例子中鼠标移入后背风景和字体色彩会有1个渐变的进程:

HOVER
.transition {
background-color: #f1f1f1;
color: black;
transition-property: background-color,color;
transition-duration: 2s;
}
.transition:hover {
background-color: #5b9bd1;
color: white;
}

这样,我们就得到了1个逐步变化的过渡效果。其中transition-property用于指定transition将监听哪些属性值的变化,而transition-duration则设置变化的周期,下面详细介绍每一个属性值的具体含义。

transition-property属性

transition-property属性指定转换需要监听的CSS属性,监听的属性值产生变化时,就会利用过渡效果。transition-property属性支持以下值:

none没有属性支持过渡效果
逗号分隔的属性列表支持过渡效果的属性列表
all所有属性都支持过渡效果

如果属性列表中存在不认识的属性或不支持动态效果的属性,在实际场景中会疏忽这些属性,其它支持动态效果的属性任然会正常生效。

如果1个属性被指定了屡次(例如指定了本身后,又指定了all),那末只有最后指定的那次会生效。

transition-duration属性

transition-duration属性定义了过渡的时间长度,即从老值转换到新值所需要的时间,值为1个时间列表,和transition-property属性的值相对应。值默许为0秒,负值将被作为0秒。

transition-timing-function属性

transition-timing-function属性定义过度过程中所需要的中间值怎样生成,每次都通过当前属性值变化的百分比计算出下1个百分比。

该属性定义的函数可以是1个stepping函数或cubic Bézier curve。stepping函数定义为:

steps(para1,para2)

steps函数需要两个参数,第1个参数指定间隔的数量,必须为整数;第2个参数是可选的,为'start'或'end',用于指定在间隔内值的改变是产生在开始还是结束。如果第2个参数被疏忽,则使用默许值'end'。


cubic Bézier curve通过4个控制点来定义,P0到P3。P0和P3总是设置到(0,0)和(1,1)。transition-timing-function属性用于指定P1和P2的值。值通过使用cubic-bezier函数指定,在cubic-bezier函数中,P1和P2都需要指定X和Y值。


cubic-bezier函数传入4个参数值(x1,y1,x2,y2),分别指定P1和P2。x的取值必须在[0,1]内,否则无效;y值可以溢出该范围。

你也能够使用下面的常量来指定transition-timing-function属性的值,下面是这些常量和他们的等价函数:

ease等价于:cubic-bezier(0.25,0.1,0.25,1.0)
linear等价于:cubic-bezier(0.0,0.0,1.0,1.0)
ease-in等价于:cubic-bezier(0.42,1.0)
ease-out等价于:cubic-bezier(0,0.58,1.0)
ease-in-out等价于:cubic-bezier(0.42,1.0)
step-start等价于:steps(1,start)
step-end等价于:steps(1,end)

transition-delay属性

transition-delay属性定义了过渡甚么时候开始,属性值为‘0s’表示过渡将在值产生改变时立即履行,否则,过渡将在指定时间偏移后履行。

如果将transition-delay属性指定为负值,过渡任然将在值产生改变时立即履行,但是将从指定的时间偏移点开始履行,即,过渡将直接定位到偏移指定的某个中间点开始履行。

transition简写属性

transition是所有过渡属性的简写属性,你可以用这1个属性指定所有的属性值。

注意在这个属性中顺序是相当重要的。第1个时间值被作为transition-duration,第2个时间值被作为transition-delay。

transition: [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [,[<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]*;

过渡中间值

过渡是1个视觉效果。在过渡就是在1段时间内将老值变换到新值,在这个进程中,过渡效果的产生就是不断的计算老值和新值之间的中间值,并赋予变化的属性。因此,如果1个脚本中过渡的进程中查询属性的值,它将得到1个中间值。

属性列表

根据上面的描写,我们可以为div元素设置过渡效果:

div {
transition-property: opacity;
transition-duration: 2s;
}

上面定义了1个过渡在'opacity'属性,当该属性产生变化时,将致使1个2秒的从旧值到新值的平滑过渡。

过渡的每一个属性都可以接受多个多个值,使用逗号分隔,多个属性之间按位置来对应:

div {
transition-property: opacity,left;
transition-duration: 2s,4s;
}

这样opacity对应2s,而left对应4s。

在这类情况下,可能存在不同的属性具有不同长度的属性值,这时候将以transition-property属性的值长度为基准。如果其它属性的值长度大于了transition-property属性的值长度,超越的值将被疏忽;如果其它属性的值长度小于了transition-property属性的值长度,则会重复使用属性的值。疏忽和重复使用都不会影响属性计算的值。

div {
transition-property: opacity,left,top,width;
transition-duration: 2s,1s;
}

上面的例子定义了4个过渡属性和两个周期时间,这样'opacity'将对应2秒,'left'将对应1秒,'top'将对应2秒,'width'将对应1秒。

“前进”和“反向”

你可以为“前进”和“反向”设置不同的属性值,例如:

div {
transition: background-color linear 1s;
background: blue;
}
div:hover {
background-color: green;
transition-duration: 5s;
}

这样当元素div进入:hover状态时,transition-duration的值将为2秒,也就是background属性从blue变化到green将经历5秒;相反,当元素div离开:hover状态时,background属性从green变化到blue则只需要1秒。看下面的实际效果:

过渡的中断

当过渡的进程中,元素的属性值被设置到了原始值,则过渡被中断。例如当hover效果利用到元素时,过渡的进程中hover效果消失(鼠标移开)。在这类情况下,新的过渡将在已经历的过渡的基础上取反。

div {
transition-property: width;
transition-duration: 10s;
width: 100px;
}
div:hover {
width: 400px;
}

支持过渡的属性

下面是支持过渡效果的属性。

属性值类型
background-colorcolor
background-positionlength、percentage或calc的列表
border-bottom-colorcolor
border-bottom-widthlength
border-left-colorcolor
border-left-widthlength
border-right-colorcolor
border-right-widthlength
border-spacinglength的列表
border-top-colorcolor
border-top-widthlength
bottomlength、percentage或calc
cliprectangle
colorcolor
font-sizelength
font-weightfont weight
heightlength、percentage或calc
leftlength、percentage或calc
letter-spacinglength
line-heightnumber或length
margin-bottomlength
margin-leftlength
margin-rightlength
margin-toplength
max-heightlength、percentage或calc
max-widthlength、percentage或calc
min-heightlength、percentage或calc
min-widthlength、percentage或calc
opacitynumber
outline-colorcolor
outline-widthlength
padding-bottomlength
padding-leftlength
padding-rightlength
padding-toplength
rightlength、percentage或calc
text-indentlength、percentage或calc
text-shadowshadow list
toplength、percentage或calc
vertical-alignlength
visibilityvisibility
widthlength、percentage或calc
word-spacinglength
z-indexinteger

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML代码中要想改变字体颜色,常常需要使用CSS样式表。CSS是一门用来描述网页上样式的语言,通过编写CSS代码可以实现网页中各元素的大小、颜色、字体等各种样式的控制。那么如何在HTML代码中应用CSS样式来改变字体颜色呢?这里为大家介绍一下。 首先,在HTML代码...
HTML代码如何让字体盖住图片呢?需要使用CSS的position属性及z-index属性。 img { position: relative; z-index: -1; } p { position: absolute; to...
HTML代码字体设置 在HTML中,我们可以使用标签来设置网页中的文字字体。常用的字体标签是font和style,下面我们来学习如何使用这些标签。 1. font标签 使用font标签可以改变文字的字体、颜色和大小。它有三个属性font-family、color和...
在网页设计中,HTML代码的字体和字号选择是非常重要的一个环节,因为它们直接关系到页面的可读性和视觉效果。 要指定文本的字体和字号,可以使用HTML中的样式属性。使用样式属性设置字体和字号,如下所示: <p style="font-family: Aria...
HTML(Hypertext Markup Language,超文本标记语言)是一种用于创建网页的标准语言。它由许多标签(一对尖括号包围的关键字)组成,这些标签告诉浏览器如何显示内容。使用HTML代码,我们可以轻松地创建各种类型的图像和图形,如太极图。 在HTM...
外链是指在一个网页中添加一个指向其他网站的链接,用户可以通过这个链接直接跳转到其他网站。在HTML中,实现外链的方法很简单,只需要使用标签就可以了。 <a href="http://www.example.com">这是一个外链,点击跳转到www.ex...
HTML代码是实现网页界面的基础,而网页中的各种表单则是用户和网站进行交互的重要方式之一。下面我们来介绍如何使用HTML代码实现一个简单的报名表格。 <form action="submit.php" method="post"> &lt...
HTML是一种标记语言,用于开发网站和其他互联网内容。字体是网站设计中的关键元素之一,它可以决定网站的整体风格和呈现效果。HTML提供了字体编辑器,使网站设计变得更加容易。 <font face="Arial"> 这里是Arial字体 &...
HTML代码中,字体样式是开发者们必备的一部分。在HTML中,我们可以通过特定的标签和属性设置字体的样式、颜色和大小,以达到更好的排版效果。 <p style="font-size: 14px; color: #333; font-family:...
HTML中的字体可以设为粗体,以强调文本信息。我们可以通过使用一些标签来实现这一功能。其中,常用的标签包括: 1. 标签:该标签会把文本加粗显示,语法如下: 这是一段加粗的文本 2. 标签:与标签作用相同,但语义更强,表示该文本内容的重要性。语法如下:...
HTML代码可以实现文件的上传和下载,在网页开发中相当常见。通过使用<input>标签和<form>标签,我们可以轻松创建一个文件上传表单。 <form action="upload.php" method="post" enct...
HTML代码非常常见于网页设计中。在一些需要处理时间相关数据的场景下,可能需要将时间戳转换为实际时间,这时候就需要使用一些特定的HTML代码。 function timeStamp2Time(time){ var date = new Date(time...
HTML是一种用于创建网页的标记语言。在HTML中,我们可以使用超链接标签实现下载文件到本地的功能。 具体实现步骤如下: <a href="文件的URL" download="文件名">下载文件</a> 其中,href属性是文件...
在HTML代码中,对于字体靠左对齐有各种方法。其中最简单的方式之一是使用pre标签。 使用pre标签可以保留一段文本中的空格和换行符,从而使代码排版更加整齐。下面是一个例子: <p>这是一个段落。</p> &lt...
HTML代码字典是一本解释HTML标记和属性的参考文献。这本字典中包含了最常用的HTML代码以及它们的属性和值的详细描述。 例如,以下是HTML代码字典中的一部分内容: <a href="url">link text</a> 在...
在网页开发过程中,遇到一些需要用户复制的内容,我们通常都会提供复制按钮,让用户更方便地复制所需内容。下面我们来介绍如何使用html代码实现一键复制的功能。 var copyBtn = document.querySelector('#copy-bt...
用户登录 欢迎来到公司登录界面,请输入用户名和密码登录 用户名: 密码: 代码解释: 第1行:定义了一个 HTML 文档 第2行:开始了 HTML 头部 第3行:定义了...
HTML 代码是用来创建网页的语言,它包含了许多不同的元素和属性,让我们可以在网页中添加各种不同的元素和内容,如文字、图片、链接等等。在编写 HTML 代码时,我们可以使用各种不同的样式来美化我们的网页,例如更改字体、颜色、大小等等。 font-family:...
HTML代码中的字体转移 在编写HTML代码时,我们经常会使用各种字体来增强页面的可读性和视觉效果。但是,有些字符或特殊符号可能会在HTML中具有不同的含义,这就需要使用字体转义转换成HTML可以正常显示的字符。 在HTML中,使用"&"符号表示一个特殊字符将要被转...
HTML 编程语言中,你可以使用字体属性来更改文本的字体大小、颜色和样式。其中,字体颜色是最常用的样式更改。在 HTML 中,你可以使用 "color" 属性来更改文本的颜色。下面是一个使用 "pre" 标签的代码示例,演示如何使用 "color" 属性来更改字体颜色...