css3之动画

css3之动画

1.圆角

通过CSS border-radius 属性，可以实现任何元素的圆角样式；

CSS border-radius属性

CSS border-radius 属性定义元素角的半径。

我们可以使用此属性为元素添加圆角！

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

实现的效果：

注：border-radius 属性实际上是以下属性的简写属性：

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

CSS border-radius - 指定每个角

border-radius 属性可以接受一到四个值。规则如下：

四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：

三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）：

两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）：

一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）：

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

实现效果如下：

还可以创建椭圆角：

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

小结

属性	描述
border-radius	用于设置所有四个 border---radius 属性的简写属性。
border-top-left-radius	定义左上角边框的形状。
border-top-right-radius	定义右上角边框的形状。
border-bottom-right-radius	定义右下角边框的形状。
border-bottom-left-radius	定义左下角边框的形状。

2.边框图像

通过使用CSS border-image 属性，可以设置图像用作围绕元素的边框。

CSS border-image 属性

CSS border-image 属性允许您指定要使用的图像，而不是包围普通边框。

该属性有三部分：

• 用作边框的图像
• 在哪里裁切图像
• 定义中间部分应重复还是拉伸

border-image 属性接受图像，并将其切成九部分，就像井字游戏板。然后，将拐角放置在拐角处，并根据您的设置重复或拉伸中间部分。

注：为了使 border-image 起作用，该元素还需要设置 border 属性！

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

效果：

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

注：border-image 属性实际上是以下属性的简写属性：

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

CSS border-image - 不同的裁切值

不同的裁切值会完全改变边框的外观：

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

效果如下：

3.多重背景（你这背景太假了（doge））

CSS 多重背景

CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像。

不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

CSS 背景尺寸

CSS background-size 属性允许您指定背景图像的大小。

可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover。

下面的例子将背景图像的大小调整为比原始图像小得多（使用像素）：

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

background-size 的其他两个可能的值是 contain 和 cover。

contain 关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。

cover 关键字会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样，背景图像的某些部分可能在背景定位区域中不可见。

下面的例子展示了 contain 和 cover 的用法：

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

定义多个背景图像的尺寸

在处理多重背景时，background-size 属性还可以接受多个设置背景尺寸的值（使用逗号分隔的列表）

下面的例子指定了三幅背景图像，每幅图像有不同的background-size 值：

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat, 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

全尺寸背景图像

我们希望网站上的背景图像始终覆盖整个浏览器窗口；

具体要求如下：

• 用图像填充整个页面（无空白）
• 根据需要缩放图像
• 在页面上居中图像
• 不引发滚动条

下面的例子显示了如何实现它：使用 html 元素（ html 元素始终至少是浏览器窗口的高度）。然后在其上设置固定且居中的背景。最后使用background-size 属性调整其大小：

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

hero image

我们还可以在 div 上使用不同的背景属性来创建Hero Image （带有文本的大图像），并将其放置在我们希望的位置上；

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

CSS background-origin

CSS background-origin 属性指定背景图像的位置。

该属性接受三个不同的值：

• border-box - 背景图片从边框的左上角开始
• padding-box -背景图像从内边距边缘的左上角开始（默认）
• content-box - 背景图片从内容的左上角开始

下面的示例展示了 background-origin 属性：

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

CSS background-clip

CSS background-clip 属性指定背景的绘制区域。

该属性接受三个不同的值：

• border-box - 背景绘制到边框的外部边缘（默认）
• padding-box - 背景绘制到内边距的外边缘
• content-box - 在内容框中绘制背景

下面的例子展示了 background-clip 属性：

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

CSS 高级背景属性

属性	描述
background	用于在一条声明中设置所有背景属性的简写属性。
background-clip	规定背景的绘制区域。
background-image	为一个元素指定一幅或多幅背景图像。
background-origin	规定背景图像的放置位置。
background-size	规定背景图像的大小。

4.渐变

CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。

CSS 定义了两种渐变类型：

• 线性渐变（向下/向上/向左/向右/对角线）
• 径向渐变（由其中心定义）

线性渐变

如需创建线性渐变，您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。

语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 从上到下（默认）

下面的例子显示了从顶部开始的线性渐变。它从红色开始，过渡到黄色：

#grad {
  background-image: linear-gradient(red, yellow);
}

线性渐变-从左到右

下面的例子显示了从左开始的线性渐变，他从红色开始，过渡到黄色：

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

线性渐变-对角线

可以通过指定水平和垂直起始位置来实现对角渐变。

下面的例子显示了从左上角开始（到右下角）的线性渐变。它从红色开始，过渡到黄色；

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

使用角度

如果希望对渐变角度做更多的控制，您可以定义一个角度，来取代预定义的方向（向下、向上、向右、向左、向右下等等）。

语法：

background-image: linear-gradient(angle, color-stop1, color-stop2);

其中的角度指定水平线和渐变线之间的角度。值 0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom）。

使用多个色标

下面的例子展示了带有多个色标的线性渐变（从上到下）：

#grad {
  background-image: linear-gradient(red, yellow, green);
}

下面的例子展示了如何使用彩虹色和一些文本创建线性渐变（从左到右）：

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

使用透明度

CSS 渐变还支持透明度，也可用于创建渐变效果。

如需添加透明度，我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）。

下面的例子展示了从左开始的线性渐变。它开始完全透明，然后过渡为全色红色：

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

重复线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

径向渐变

径向渐变由其中心定义。

如需创建径向渐变，您还必须定义至少两个色标。

语法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

默认地，shape 为椭圆形，size 为最远角，position 为中心。

径向渐变-均匀间隔的色标（默认）

下面的例子展示了带有均匀间隔的色标的径向渐变：

#grad {
  background-image: radial-gradient(red, yellow, green);
}

径向渐变-不同间距的色标

下面的例子展示了一个径向渐变，其色标之间的间隔不同：

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

设置形状

shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）。

下面的例子展示了一个圆形的径向渐变：

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

后面感觉有点不常用了，后续就参见CSS 径向渐变 (w3school.com.cn)吧

5.阴影

CSS 文字阴影

CSS text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：

h1 {
  text-shadow: 2px 2px;
}

接下来，为阴影添加颜色：

h1 {
  text-shadow: 2px 2px red;
}

然后，向阴影添加模糊效果：

h1 {
  text-shadow: 2px 2px 5px red;
}

下面的例子展示了带有黑色阴影的白色文本：

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

下面的例子展示了红色的霓虹发光阴影：

h1 {
  text-shadow: 0 0 3px #FF0000;
}

多个阴影

如需在文本中添加多个阴影，您可以添加以逗号分隔的阴影列表。

下面的例子展示了红色和蓝色的霓虹灯发光阴影：

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

下面的例子展示了带有黑色、蓝色和深蓝色阴影的白色文本：

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

您还可以使用 text-shadow 属性在文本周围创建纯边框（无阴影）：

h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

CSS box-shadow 属性

CSS box-shadow 属性应用阴影于元素。

最简单的用法是只指定水平阴影和垂直阴影：

div {
  box-shadow: 10px 10px;
}

接下来，为阴影添加颜色：

div {
	box-shadow: 10px 10px grey;
}

接下来，向阴影添加模糊效果：

div {
  box-shadow: 10px 10px 5px grey;
}

卡片

我们还可以用box-shadow 属性创建纸质卡片效果：

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

上图分别为纸卡片和图像卡片

6.文本效果

CSS文本溢出，整字换行，换行规则以及书写规则

文字溢出

CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容。

可以被裁剪，也可以将其呈现为省略号（…）：

p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip; 
}

p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

下面的例子展示了将鼠标悬停在元素上时显示溢出的内容：

div.test:hover {
  overflow: visible;
}//实现了将鼠标悬停在盒子上显示溢出内容

字换行（Word Wrapping）

CSS word-wrap 属性使长文字能够被折断并换到下一行。

如果一个单词太长而无法容纳在一个区域内，它会向外扩展：

通过 word-wrap 属性，您可以强制对文本进行换行 - 即使这意味着在词中间将其拆分：

实现代码：

p {
  word-wrap: break-word;
}

换行规则：

CSS word-break 属性指定换行规则。

p.test1 {
  word-break: keep-all;
}

本段包含一些文本，此行将连字符打断：

p.test2 {
  word-break: break-all;
}

本段包含一些文本，这些行将在任何字符处中断：

书写模式

CSS writing-mode 属性规定文本行是水平放置还是垂直放置。

p.test1 {
  writing-mode: horizontal-tb; //整个p元素水平放置
}

span.test2 {
  writing-mode: vertical-rl;// span元素垂直放置
}

p.test2 {
  writing-mode: vertical-rl; //整个p元素垂直放置
}

小结：

下表列出了 CSS 文本效果属性：

属性	描述
text-align-last	指定如何对齐文本的最后一行。
text-justify	指定对齐的文本应如何对齐和间隔。
text-overflow	指定应如何向用户呈现未显示的溢出内容。
word-break	指定非 CJK 脚本的换行规则。
word-wrap	允许长单词被打断并换到下一行。
writing-mode	指定文本行是水平放置还是垂直放置。

7.web字体

由于此内容应用不多，具体内容参见CSS Web 字体 (w3school.com.cn)

8.2D转换

CSS转换允许我们移动，旋转，缩放和倾斜元素；

浏览器支持

表格中的数字指注明了完全支持该属性的首个浏览器版本。

属性	Chrome	IE	Firefox	Safari	Opera
transform	36.0	10.0	16.0	9.0	23.0

translate（）：

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

下面的例子把 div 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素：

div {
  transform: translate(50px, 100px);
}

rotate（）：

rotate() 方法根据给定的角度顺时针或逆时针旋转元素。

下面的例子把

元素顺时针旋转 20 度：

div {
  transform: rotate(20deg);
}

使用负值将逆时针旋转元素。

下面的例子把 div 元素逆时针旋转 20 度：

div {
  transform: rotate(-20deg);
}

scale（）：

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。

下面的例子把 div 元素增大为其原始宽度的两倍和其原始高度的三倍：

div {
  transform: scale(2, 3);
}

scaleX（）：

scaleX() 方法增加或减少元素的宽度。

下面的例子把 div 元素增大为其原始宽度的两倍：

div {
  transform: scaleX(2);
}

scaleY（）：

scaleY() 方法增加或减少元素的高度。

下面的例子把 div 元素增大到其原始高度的三倍：

div {
  transform: scaleY(3);
}

skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

下面的例子使

元素沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度：

div {
  transform: skew(20deg, 10deg);
}

注：如未指定第二个参数，则值为0；

skewX() 方法

skewX() 方法使元素沿 X 轴倾斜给定角度。

下例把

元素沿X轴倾斜 20 度：

div {
  transform: skewX(20deg);
}

skewY() 方法

skewY() 方法使元素沿 Y 轴倾斜给定角度。

下例把

元素沿 Y 轴倾斜 20 度：

div {
  transform: skewY(20deg);
}

matrix() 方法

matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

CSS 转换属性

下表列出了所有 2D 变换属性：

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。

小结

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

9.3D转换

书接上回，CSS还支持3D转换；

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性	Chrome	IE	Firefox	Safari	Opera
transform	36.0	10.0	16.0	9.0	23.0

rotateX() 方法

rotateX() 方法使元素绕其 X 轴旋转给定角度：

#myDiv {
  transform: rotateX(150deg);
}

rotateY() 方法

rotateY() 方法使元素绕其 Y 轴旋转给定角度：

#myDiv {
  transform: rotateY(130deg);
}

rotateZ() 方法

rotateZ() 方法使元素绕其 Z 轴旋转给定角度：

#myDiv {
  transform: rotateZ(90deg);
}

CSS 转换属性

下表列出了所有 3D 变换属性：

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

小结

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

10.过渡

如何使用 CSS 过渡？

如需创建过渡效果，必须明确两件事：

• 您要添加效果的 CSS 属性
• 效果的持续时间

注意：如果未规定持续时间部分，则过渡不会有效果，因为默认值为 0。

下面的例子展示了 100px * 100px 的红色

元素。

元素还为 width 属性指定了过渡效果，持续时间为 2 秒：

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

当指定的 CSS 属性（width）值发生变化时，将开始过渡效果。

现在，让我们为 width 属性指定一个鼠标悬停在

元素上时的新值：

div:hover {
  width: 300px;
}

注：当光标从元素上移开时，它将逐渐变回其原始样式；

改变若干属性值

和前面的大多数属性一样，只需将两个属性用逗号隔开即可；

下面的例子为 width 和 height 属性都添加了过渡效果，width 是 2 秒，height 是 4 秒：

div {
  transition: width 2s, height 4s;
}

指定过渡的速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

• ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
• linear - 规定从开始到结束具有相同速度的过渡效果
• ease-in -规定缓慢开始的过渡效果
• ease-out - 规定缓慢结束的过渡效果
• ease-in-out - 规定开始和结束较慢的过渡效果
• cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

下面的例子展示了可以使用的一些不同的速度曲线：

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

（这种动画很难用图片来显示，想知道啥效果自己去运行吧）

延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）；

下例在启动之前有一秒的延迟：

div {
	transition-delay: 1s;
}

过渡+转换

通过一些手段，我们还可以为转换添加过渡效果，

例：

div {
  transition: width 2s, height 2s, transform 2s;
}

小结

下表列出了所有 CSS 过渡属性：

属性	描述
transition	简写属性，用于将四个过渡属性设置为单一属性。
transition-delay	规定过渡效果的延迟（以秒计）。
transition-duration	规定过渡效果要持续多少秒或毫秒。
transition-property	规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function	规定过渡效果的速度曲线。

11.动画

CSS 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash！

下面将介绍如下属性：

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

对动画的浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性	Chrome	IE	Firefox	Safari	Opera
@keyframes	43.0	10.0	16.0	9.0	30.0
animation-name	43.0	10.0	16.0	9.0	30.0
animation-duration	43.0	10.0	16.0	9.0	30.0
animation-delay	43.0	10.0	16.0	9.0	30.0
animation-iteration-count	43.0	10.0	16.0	9.0	30.0
animation-direction	43.0	10.0	16.0	9.0	30.0
animation-timing-function	43.0	10.0	16.0	9.0	30.0
animation-fill-mode	43.0	10.0	16.0	9.0	30.0
animation	43.0	10.0	16.0	9.0	30.0

什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式。

您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

@keyframes规则

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式，要使动画生效，必须将动画绑定到某个元素。

下面的例子将 “example” 动画绑定到 div 元素。动画将持续 4 秒钟，同时将 div 元素的背景颜色从 “red” 逐渐改为 “yellow”：

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;//必须指定，该属性定义需要多长时间才能完成动画，如果未指定该属性，则动画不会发生，因为默认值是0s。
}

上述样例使用了from和to关键词（分别代表了0%和100%），我们也可以用百分比值。

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改

元素的背景颜色：

/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;//此时这里的时间为总时间
}

延迟动画

animation-delay 属性规定动画开始的延迟时间。

下面的例子在开始动画前有 2 秒的延迟：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

在下面的例子中，动画将开始播放，就好像它已经播放了 2 秒钟一样：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

设置动画应运行多少次

animation-iteration-count 属性指定动画应运行的次数。

下面的例子在停止前把动画运行 3 次：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

下面的例子使用值 “infinite” 使动画永远持续下去：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

• normal - 动画正常播放（向前）。默认值
• reverse - 动画以反方向播放（向后）
• alternate - 动画先向前播放，然后向后
• alternate-reverse - 动画先向后播放，然后向前

下例将以相反的方向（向后）运行动画：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

下面的例子使用值 “alternate” 使动画先向前运行，然后向后运行：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

下面的例子使用值 “alternate-reverse” 使动画先向后运行，然后向前运行：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

• ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
• linear - 规定从开始到结束的速度相同的动画
• ease-in - 规定慢速开始的动画
• ease-out - 规定慢速结束的动画
• ease-in-out - 指定开始和结束较慢的动画
• cubic-bezier(*n*,*n*,*n*,*n*) - 运行您在三次贝塞尔函数中定义自己的值

下面这些例子展示了可以使用的一些不同速度曲线：

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

指定动画的填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

• none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
• forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
• backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
• both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

下面的例子让 div 元素在动画结束时保留来自最后一个关键帧的样式值：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

下面的例子在动画开始之前（在动画延迟期间）使

元素获得由第一个关键帧设置的样式值：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

下面的例子在动画开始之前使

元素获得第一个关键帧设置的样式值，以及在动画结束时保留最后一个关键帧的样式值：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

动画简写属性

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

上述样式可以用如下样式代替：

div {
  animation: example 5s linear 2s infinite alternate;
}

小结

下表列出了 @keyframes 规则和所有 CSS 动画属性：

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

12.工具提示

基础的工具提示

<style>
/* Tooltip 容器 */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* 如果需要在可悬停文本下面显示点线 */
}

/* Tooltip 文本 */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* 定位工具提示文本 - 请看下面的例子 */
  position: absolute;
  z-index: 1;
}

/* 将鼠标悬停在工具提示容器上时，显示工具提示文本 */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

定位工具提示

左侧（右侧）工具提示

在本例中，工具提示位于“可悬停”文本（div）的右侧（left:105%）。另外请注意，top:-5px 用于将其放置在其容器元素的中间。我们使用数字 5 是因为工具提示文本的上下内边距均为 5px。如果增加其内边距，还请您同时增加 top 属性的值，以确保它停留在中间。如果要将工具提示放在左侧，也同样适用。

.tooltip .tooltiptext {
  top: -5px;
  left: 105%; 
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6XoDcCkG-1681029552172)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20230409110847414.png)]

顶部（底部）工具提示

如果您希望工具提示位于上方或下方，请看下面的例子。请注意，我们使用了负 60 像素的左外边距属性（margin-left）。这是为了把工具提示与可悬停文本进行居中对齐。该值是工具提示宽度的一半（120/2 = 60）。

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%; 
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

工具提示箭头

如需创建在工具提示的指定侧面显示的箭头，请在工具提示后添加“空的”内容，并使用伪元素类 ::after 和 content 属性。箭头本身是使用边框创建的。这会使工具提示看起来像气泡。

本例演示如何在工具提示的底部添加箭头：

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

例子解释：

将箭头定位在工具提示内：top: 100% 将箭头放置在工具提示的底部。left: 50% 将使箭头居中。

注意：border-width 属性指定箭头的大小。如果您更改此设置，也请将 margin-left 值更改为相同值。这将使箭头居中。

border-color 用于将内容转换为箭头。我们将上边框设置为黑色，其余设置为透明。如果所有面都是黑色，则最终将得到一个黑色的方形框。

上述用例为在提示框底部加箭头，如果需要在其他方位，对应修改border-color即可；

淡入的工具提示（动画）

如果希望在即将显示的工具提示文本中淡入淡出，可以将 CSS transition 属性与 opacity 属性一同使用，并在指定的秒数（例子中是 1 秒）内从完全不可见变为 100％ 可见：

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}

13.图像样式

圆角图像

使用border-radius 属性创建圆形图像：

圆角图像：

img {
  border-radius: 8px;
}

圆形图像：

img {
  border-radius: 50%;
}

缩略图图像

使用 border 属性创建缩略图。

缩略图：

<style>
img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>

<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

响应式图像

响应式图像会自动调整以适合屏幕尺寸

img {
  max-width: 100%;
  height: auto;
}

居中图像

如需使图像居中，可以将左右外边距设置为 auto 并将其设置为块元素；

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

宝丽来图片/卡片

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
  text-align: center;
  padding: 10px 20px;
}

透明图像

跟前文一样，用opacity来表示不透明度，值越低，越透明；

img {
  opacity: 0.5;
}

图像滤镜

CSS 用filter 属性把视觉效果（如模糊和饱和度）添加到元素。

img {
  filter: grayscale(100%);
}

上例把所有图像的颜色更改为黑白（100%灰色）。

滤镜函数

注释：使用百分比值（例如 75％）的滤镜，也接受该值是十进制（例如 0.75）。

滤镜	描述
none	默认值。规定无效果。
blur(px)	对图像应用模糊效果。较大的值将产生更多的模糊。如果为指定值，则使用 0。
brightness(%)	调整图像的亮度。0％ 将使图像完全变黑。默认值是 100％，代表原始图像。值超过 100％ 将提供更明亮的结果。
contrast(%)	调整图像的对比度。0％ 将使图像完全变黑。默认值是 100％，代表原始图像。超过 100％ 的值将提供更具对比度的结果。
drop-shadow(h-shadow v-shadow blur spread color)	对图像应用阴影效果。可能的值：h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。blur -可选。这是第三个值，单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多（阴影会变得更大更亮）。不允许负值。如果未规定值，会使用 0（阴影的边缘很锐利）。spread - 可选。这是第四个值，单位必须用像素。正值将导致阴影扩展并增大，负值将导致阴影缩小。如果未规定值，会使用 0（阴影与元素的大小相同）。**注释：**Chrome、Safari 和 Opera，也许还有其他浏览器，不支持第 4 个长度；如果添加，则不会呈现。color - 可选。为阴影添加颜色。如果未规定，则颜色取决于浏览器（通常为黑色）。这个例子创建了红色的阴影，水平和垂直方向均为 8px，带有 10px 的模糊效果：filter: drop-shadow(8px 8px 10px red);**提示：**这个滤镜类似 box-shadow 属性。
grayscale(%)	将图像转换为灰阶。0% (0) 是默认值，代表原始图像。100％ 将使图像完全变灰（用于黑白图像）。**注释：**不允许负值。
hue-rotate(deg)	在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg，代表原始图像。**注释：**最大值是 360deg。
invert(%)	反转图像中的样本。0% (0) 是默认值，代表原始图像。100％将使图像完全反转。**注释：**不允许负值。
opacity(%)	设置图像的不透明度级别。opacity-level 描述了透明度级别，其中：0% 为完全透明。100% (1) 是默认值，代表原始图像（不透明）。**注释：**不允许负值。**提示：**这个滤镜类似 opacity 属性。
saturate(%)	设置图像的饱和度。0% (0) will make the image completely un-saturated.100% is default and represents the original image.Values over 100% provides super-saturated results.**注释：**不允许负值。
sepia(%)	将图像转换为棕褐色。0% (0) 是默认值，代表原始图像。100％ 将使图像完全变为棕褐色。**注释：**不允许负值。
url()	url() 函数接受规定 SVG 滤镜的 XML 文件的位置，并且可以包含指向特定滤镜元素的锚点。实例：filter: url(svg-url#element-id)
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

演示：（效果图自己去运行吧）

.blur {
  filter: blur(4px);
}

.brightness {
  filter: brightness(0.30);
}

.contrast {
  filter: contrast(180%);
}

.grayscale {
  filter: grayscale(100%);
}

.huerotate {
  filter: hue-rotate(180deg);
}

.invert {
  filter: invert(100%);
}

.opacity {
  filter: opacity(50%);
}

.saturate {
  filter: saturate(7);
}

.sepia {
  filter: sepia(100%);
}

.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 的数字表示使用前缀的首个版本。

Chrome	IE / Edge	Firefox	Safari	Opera
53.0 18.0 -webkit-	13.0	35.0	9.1 6.0 -webkit-	40.0 15.0 -webkit-

注释：较旧版本的 Internet Explorer（4. 0到 8.0）支持已弃用的非标准 “filter” 属性。当需要 IE8 及更低版本的支持时，主要用于不透明度。

翻转图像

当鼠标移到图像上，翻转图像：

img:hover {
  transform: scaleX(-1);
}

图像悬停叠加，响应式图库，图像模态

淡入文本，淡入框，滑入（上，下，左，右），响应式等等参见CSS 图像样式 (w3school.com.cn)

14.object-fit属性

CSS object-fit 属性用于指定应如何调整 或 的大小以适合其容器。

这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间”。

CSS object-fit 属性的所有值

object-fit 属性可接受如下值：

• fill - 默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
• contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。
• cover - 调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
• none - 不对替换的内容调整大小。
• scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）

下面的例子演示了 object-fit 属性的所有可能值：

fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}

15.按钮

按钮颜色

我们可以用background-color 属性更改按钮的背景色：

.button1 {background-color: #4CAF50;} /* 绿色 */
.button2 {background-color: #008CBA;} /* 蓝色 */
.button3 {background-color: #f44336;} /* 红色 */ 
.button4 {background-color: #e7e7e7; color: black;} /* 灰色 */ 
.button5 {background-color: #555555;} /* 黑色 */

按钮尺寸

我们可以用font-size 属性更改按钮的字体大小

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

还可以用padding 属性来更改按钮的内边距

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

圆角按钮

我们可以用border-radius 属性为按钮添加圆角

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

彩色边框按钮

我们可以用border 属性来为按钮添加颜色

.button {
  background-color: #4CAF50; /* 绿色 */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

可悬停按钮

当鼠标移动到按钮上方时，使用 :hover 选择器可更改按钮的样式

我们可以用 transition-duration 属性来确定“悬停”效果的速度：

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button3:hover {
  background-color: #f44336;
  color: white;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.button5:hover {
  background-color: #555555;
  color: white;
}

（实现效果自己去跑代码）

阴影按钮

用box-shadow 属性来为按钮添加阴影：

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

禁用按钮

我们可以用opacity 属性为按钮添加透明度（创建“禁用”外观）；

再用cursor：not-allowed 属性来做到：当鼠标悬停在按钮上时，显示“no parking sign”（禁停标志）

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

效果自己去跑代码看

动画按钮

在鼠标悬停时天加箭头：

<style>
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>

<h1>带动画效果的按钮</h1>

<button class="button" style="vertical-align:middle"><span>请悬停在我上方</span></button>

添加点击时的“按键按下”效果：

<style>
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>

<h1>带动画效果的按钮 - 按键效果</h1>

<button class="button">请点击我</button>

鼠标悬停时淡入：

<style>
.button {
  background-color: #f4511e;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {opacity: 1}
</style>

<h1>淡入按钮 - 淡入效果</h1>

<button class="button">请悬停在我上方</button>

添加点击时的“涟漪”效果：

<style>
.button {
  position: relative;
  background-color: #4CAF50;
  border: none;
  font-size: 28px;
  color: #FFFFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.button:after {
  content: "";
  background: #f1f1f1;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}
</style>

<h1>带动画效果的按钮 - 涟漪效果</h1>

<button class="button">请点击我</button>

16.分页

简单分页

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

活动的可悬停分页

用 .active 类突出显示当前页面，并在鼠标移到它们上方时使用 :hover 选择器更改每个页面链接的颜色：

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

圆角的活动可悬停分页

我们可以通过添加 border-radius 属性来实现圆角：

.pagination a {
  border-radius: 5px;
}

.pagination a.active {
  border-radius: 5px;
}

可悬停的过渡效果

将transition 属性添加到页面链接，创建鼠标悬停时的过渡效果：

.pagination a {
  transition: background-color .3s;
}

我们还可以对其加边框，圆角边框，链接之间的空隙，还可以将分页居中等等，

操作比较简单，都是对前面内容的一个应用，详情参见CSS 分页实例 (w3school.com.cn)