2022-04-24 0 72 web前端社区
通常当 CSS 的属性值更改后,浏览器会立即更新相应的样式,例如当鼠标悬停在元素上时,通过 :hover 选择器定义的样式会立即应用在元素上。在 CSS3 中加入了一项过渡功能,通过该功能您可以将元素从一种样式在指定时间内平滑的过渡到另一种样式,类似于简单的动画,但无需借助 flash 或 JavaScript。
CSS 中提供了 5 个有关过渡的属性,如下所示:
要成功实现过渡效果,必须定义以下两项内容:
提示:过渡效果通常会在鼠标悬停在元素上时发生,如果未设置过渡持续的时间,则过渡效果不会生效,因为过渡时间的默认值为 0。
transition-property 属性用来设置元素中参与过渡的属性名称,语法格式如下:
transition-property: none | all | property;
参数说明如下:
,
进行分隔。transition-duration 属性用来设置过渡需要花费的时间(单位为秒或者毫秒),语法格式如下:
transition-duration: time;
其中,time 为完成过渡效果需要花费的时间(单位为秒或毫秒),默认值为 0,意味着不会有效果。
如果有多个参与过渡的属性,也可以依次为这些属性设置过渡需要的时间,多个属性之间使用逗号进行分隔,例如
transition-duration: 1s, 2s, 3s;
transition-timing-function 属性用来设置过渡动画的类型,属性的可选值如下:
值 | 描述 |
---|---|
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 之间 |
transition-delay 属性用来设置过渡效果何时开始,属性的语法格式如下:
transition-delay: time;
其中,参数 time 用来设置在过渡效果开始之前需要等待的时间,单位为秒或毫秒。
transition 属性是上面四个属性的简写形式,通过该属性可以同时设置上面的四个属性,属性的语法格式如下:
transition: transition-property transition-duration transition-timing-function transition-delay;
transition 属性中,transition-property 和 transition-duration 为必填参数,transition-timing-function 和 transition-delay 为选填参数,如非必要可以省略不写。另外,通过 transition 属性也可以设置多组过渡效果,每组之间使用逗号进行分隔,示例代码如下:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border: 3px solid black;
margin: 10px 0px 0px 10px;
transition: width .25s linear 1.9s, background 1s 2s, transform 2s;
}
div:hover {
width: 200px;
background-color: blue;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS 中的动画类似于 flash 中的逐帧动画,表现细腻并且非常灵活,使用 CSS 中的动画可以取代许多网页中的动态图像、Flash 动画或者 JavaScript 实现的特殊效果。
@keyframes 规则用来定义动画各个阶段的属性值,类似于动画中的帧,如:
@keyframes animationName {
from {
properties: value;
}
percentage {
properties: value;
}
to {
properties: value;
}
}
// 或者
@keyframes animationName {
0% {
properties: value;
}
percentage {
properties: value;
}
100% {
properties: value;
}
}
语法说明如下:
下面我们来看一个简单的 @keyframes 规则示例:
@keyframes ball {
0% { top: 0px; left: 0px;}
25% { top: 0px; left: 350px;}
50% { top: 200px; left: 350px;}
75% { top: 200px; left: 0px;}
100% { top: 0px; left: 0px;}
}
动画创建好后,还需要将动画应用到指定的 HTML 元素。要将动画应用到指定的 HTML 元素需要借助 CSS 属性,CSS 中提供了如下所示的动画属性:
下面就来详细介绍一下上述属性的使用。
animation-name 属性用来将动画绑定到指定的 HTML 元素,属性的可选值如下:
值 | 描述 |
---|---|
keyframename | 要绑定到 HTML 元素的动画名称,可以同时绑定多个动画,动画名称之间使用逗号进行分隔 |
none | 表示无动画效果, |
要想让动画成功播放,您还需要定义 animation-duration 属性,否则会因为 animation-duration 属性的默认值为 0,导致动画并不会播放。
animation-duration 属性用来设置动画完成一个周期所需要花费的时间,单位为秒或者毫秒。
动画若想成功播放,必须要定义 animation-name 和 animation-duration 属性。
animation-timing-function 属性用来设置动画播放的速度曲线,通过速度曲线的设置可以使动画播放的更为平滑。animation-timing-function 属性的可选值如下表所示:
值 | 描述 |
---|---|
linear | 动画从开始到结束的速度是相同的 |
ease | 默认值,动画以低速开始,然后加快,在结束前变慢 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始,并以低速结束 |
cubic-bezier(n, n, n, n) | 使用 cubic-bezier() 函数来定义动画的播放速度,参数的取值范围为 0 到 1 之间的数值 |
animation-fill-mode 属性用来设置当动画不播放时(开始播放之前或播放结束之后)动画的状态(样式),属性的可选值如下:
值 | 描述 |
---|---|
none | 不改变动画的默认行为 |
forwards | 当动画播放完成后,保持动画最后一个关键帧中的样式 |
backwards | 在 animation-delay 所指定的时间段内,应用动画第一个关键帧中的样式 |
both | 同时遵循 forwards 和 backwards 的规则 |
animation-delay 属性用来定义动画开始播放前的延迟时间,单位为秒或者毫秒,属性的语法格式如下:
animation-delay: time;
其中参数 time 就是动画播放前的延迟时间,参数 time 既可以为正值也可以为负值。参数值为正时,表示延迟指定时间开始播放;参数为负时,表示跳过指定时间,并立即播放动画。
animation-iteration-count 属性用来定义动画播放的次数,属性的可选值如下:
值 | 描述 |
---|---|
n | 使用具体数值定义动画播放的次数,默认值为 1 |
infinite | 表示动画无限次播放 |
animation-direction 属性用来设置是否轮流反向播放动画,属性的可选值如下:
值 | 描述 |
---|---|
normal | 以正常的方式播放动画 |
reverse | 以相反的方向播放动画 |
alternate | 播放动画时,奇数次(1、3、5 等)正常播放,偶数次(2、4、6 等)反向播放 |
alternate-reverse | 播放动画时,奇数次(1、3、5 等)反向播放,偶数次(2、4、6 等)正常播放 |
animation-play-state 属性用来设置动画是播放还是暂停,属性的可选值如下:
值 | 描述 |
---|---|
paused | 暂停动画的播放 |
running | 正常播放动画 |
animation 属性是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state 几个属性的简写形式,通过 animation 属性可以同时定义上述的多个属性,语法格式如下:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
其中每个参数分别对应上面介绍的各个属性,如果省略其中的某个或多个值,则将使用该属性对应的默认值。
如:
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes box {
0% {transform: rotate(0);}
50% {transform: rotate(0.5turn);}
100% {transform: rotate(1turn);}
}
div {
width: 100px;
height: 100px;
border-radius: 50%;
float: left;
border: 3px solid black;
text-align: center;
line-height: 100px;
position: relative;
animation: box 2s linear 0s infinite alternate;
}
</style>
</head>
<body>
<div>animation</div>
</body>
</html>
重写checkbox和radio样式 ,用label关联,然后改变label标签样式
.ra1_input:checked+label{
background-color: blue;
}
.ra1_input:checked+label::after{
right: 0;
}
.ra1{
display: block;
position: relative;
width: 50px;
height: 25px;
background-color: gray;
border-radius: 25px;
}
.ra1::after{
content: "";
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: black;
border-radius: 50%;
}
<style>
div {
margin: 0 auto;
width: 300px;
color: red;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
</head>
<body>
<div>多行文本省略多行文本省略多行文本省略多行文本省略多行文本
省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本
省略多行文本省略多行文本省略多行文本省略多行文本省略</div>
</body>
1、-webkit-line-clamp:2; (用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果,它需要组合其他的WebKit属性)
2、display: -webkit-box; (和1结合使用,将对象作为弹性伸缩盒子模型显示 )
3、-webkit-box-orient:vertical;( 和1结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 。)
4、overflow:hidden; (顾名思义超出限定的宽度就隐藏内容)
5、text-overflow: ellipsis;(规定当文本溢出时显示省略符号来代表被修剪的文本)
table-layout 属性用来设置表格布局时所用的布局算法:
值 | 描述 |
---|---|
automatic | 默认值,自定表格布局,表示表格中每列的宽度视单元格中的内容而定 |
fixed | 固定表格布局,表示表格的宽度由列宽度、单元格边框、单元格之间的间距等因素而定 |
inherit | 从父元素继承 table-layout 属性的值 |
固定表格布局允许浏览器更快地对表格进行布局。在固定表格布局中,表格的水平宽度仅取决于列宽度、表格边框宽度、单元格间距等因素,与单元格中的内容无关。也就是说,表格中超出表格宽度的内容可能会被忽略。
在自动表格布局中,列的宽度视单元格中的内容(没有换行的最宽内容)而定,也就是说如果某个单元格的宽度为 100px,但单元格中内容所占据的宽度要大于 100px,这就会导致单元格中的内容将单元格撑大。正是因为这一特点,此种算法可能会比较慢。
border-collapse 属性用来设置是否合并表格中相邻的边框:
值 | 描述 |
---|---|
separate | 默认值,相邻的两个边框是分开的,使用它不会忽略 border-spacing 和 empty-cells 属性 |
collapse | 相邻的两个边框会合并为一个单一的边框,使用它会忽略 border-spacing 和 empty-cells 属性 |
inherit | 从父元素继承 border-collapse 属性的值 |
border-spacing 属性可以设置相邻单元格边框之间的距离(仅在 border-collapse 属性为 separate 时才有效),它的效果等同于<table>
标签的 cellspacing 属性
border-spacing 属性的语法:border-spacing: length length;
CSS 中的计数器类似于变量,可以实现简单的计数功能,并将结果显示在页面上。实现计数器需要用到以下几个属性:
要使用计数器首先需要使用 counter-reset 属性来创建一个计数器,这一过程便叫做初始化计数器。counter-reset 属性的语法格式如下:
counter-reset:none | [
参数说明如下:
初始化计数器后,可以通过 counter-increment 属性来指定计数器何时自增,格式如下:
counter-increment:none | [
参数说明如下:
最后,就是如何显示计数器了。要显示计数器您可以使用 counter() 或 counters() 函数,这两个函数的语法格式如下:
counter(name)
counters(name, string, list-style-type)
body{
counter-reset: dl; /**/
}
dl{
counter-reset: dd;
counter-increment: dl;
}
dd{
counter-increment: dd;
}
dt::before{
content: counter(dl);
}
dd::before{
content: counter(dl) "." counter(dd);
}
ol{
counter-reset: ul;
}
ol>li::before{
counter-increment: ul;
content: counters(ul,"-") ":";
}
Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3