CSS样式进阶

^～^前行者～～～

于 2024-04-14 13:51:04 发布

阅读量1.1k

点赞数 36

文章标签： css 前端 css3 开发语言

本文链接：https://blog.csdn.net/huaz_md/article/details/137727342

版权

华子目录

@media查询
@font-face字体
css变换效果
CSS过渡效果
CSS动画效果
CSS渐变
CSS多列

@media查询

在CSS中，@media 规则用于为不同的媒体类型（如屏幕、打印机、手持设备等）或媒体特性（如视口宽度、分辨率等）定义不同的样式规则。这使得开发者能够创建响应式设计，根据设备或视口的特性调整页面布局和样式。

@media 规则的基本语法如下：

@media media-type and|not|only (media-feature) {
  /* CSS样式规则 */
}

media-type：定义媒体类型，如：
- screen（用于计算机屏幕）、
- print（用于打印文档）、
- handheld（用于手持设备）等。
- 这个参数是可选的，如果省略，则默认为 all，表示应用于所有媒体类型。
media-feature：定义媒体特性，如
- min-width、max-width、resolution 等。这些特性允许你根据设备的具体特性来应用样式。

示例

根据视口宽度调整样式

假设你想在视口宽度小于600px时改变背景颜色，你可以这样写：

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

在这个例子中，当屏幕（screen）的视口宽度（max-width）小于或等于600px时，页面的背景颜色会变为浅蓝色。

响应式布局

@media 规则在响应式布局中特别有用，因为它允许你根据设备的屏幕尺寸或特性调整布局和样式。例如，你可能希望在小屏幕上隐藏某些元素，或在大屏幕上改变元素的排列方式。

注意事项

@media 规则应该放在CSS文件的顶部，以确保它们能够正确地覆盖其他样式规则。
在使用 @media 规则时，尽量保持样式规则的简洁和模块化，以便于管理和维护。
在设计响应式布局时，要注意不同设备和浏览器的兼容性，确保你的样式能够在各种环境下正确显示。

@font-face字体

@font-face 是 CSS 中用于加载服务器上的字体文件，并将其应用于网页文本的一个规则。这样，你可以使用非标准或系统默认的字体，为用户提供更丰富、更独特的视觉体验。

以下是 @font-face 的基本使用方式：

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

在上面的代码中：

font-family: 'MyCustomFont';：定义了字体的名称，你可以在后面的 CSS 规则中通过这个名称来引用这个字体。
src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');：定义了字体文件的路径和格式。这里提供了两种格式的字体文件，浏览器会优先选择第一个（woff2），如果第一个不支持，则会尝试第二个（woff）。这是为了确保最大兼容性。
font-weight: normal; 和 font-style: normal;：定义了字体的粗细和样式。如果你有其他粗细或样式的字体文件，你可以添加更多的 @font-face 规则来定义它们。

接下来，你就可以在 CSS 中使用这个自定义字体了：

body {
  font-family: 'MyCustomFont', sans-serif;
}

这里，font-family 属性首先尝试使用 'MyCustomFont'，如果浏览器不支持或无法加载这个字体，则会回退到使用 sans-serif 字体。这是一种良好的做法，以确保在所有情况下都有字体可用。
在这里插入图片描述

css变换效果

转换是使元素改变形状、尺寸和位置的一种效果。分为2D变换和3D变换。

转换属性

在这里插入图片描述

2D转换

CSS提供的2D变换有如下几种，这几种效果都是通过transform属性来调用完成的。

translate()平移
rotate()旋转
scale()缩放
skew()拉伸
matrix()矩阵变换

CSS中的transform属性是一个用于转换元素形状、大小和位置的强大工具。它允许开发人员对元素进行各种转换操作，包括平移（translation）、缩放（scale）、旋转（rotation）、拉伸（skew）以及矩阵变换（matrix）。

translate()平移：平移是指将元素从其当前位置移动到另一个位置。该函数接受两个参数，分别表示水平方向和垂直方向的移动量。
scale()缩放：缩放操作可以改变元素的大小。它接受两个参数，分别表示水平方向和垂直方向的缩放比例。
rotate()旋转：旋转操作可以使元素围绕其中心点或其他指定点进行旋转。它接受一个参数，表示旋转的角度。
skew()拉伸：拉伸操作可以改变元素的形状，使其呈现倾斜的外观。它接受两个参数，分别表示水平方向和垂直方向的倾斜角度。

transform属性可以单独设置，也可以组合多个变换来影响一个元素的外观。例如，你可以同时使用translate()和rotate()函数来移动并旋转一个元素。

此外，transform-origin属性用于设置元素旋转的中心点。默认情况下，旋转是围绕元素的中心点进行的，但你可以通过修改transform-origin的值来改变旋转的中心点。

以下是一些使用CSS transform 属性的案例：

案例一：移动元素

使用 translate() 函数可以移动元素。例如，如果你想要将一个元素向右移动50px，向下移动100px，你可以这样写：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(50px, 100px);
}

在这个例子中，.box 元素会从其原始位置向右移动50px，向下移动100px。

案例二：缩放元素

使用 scale() 函数可以缩放元素。例如，如果你想要将一个元素放大到原来的1.5倍，你可以这样写：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale(1.5);
}

在这个例子中，.box 元素的宽度和高度都会放大到原来的1.5倍。

案例三：旋转元素

使用 rotate() 函数可以旋转元素。例如，如果你想要将一个元素顺时针旋转45度，你可以这样写：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}

在这个例子中，.box 元素会顺时针旋转45度。

案例四：倾斜元素

使用 skew() 函数可以倾斜元素。例如，如果你想要将一个元素在X轴上倾斜30度，在Y轴上倾斜-10度，你可以这样写：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: skew(30deg, -10deg);
}

在这个例子中，.box 元素会按照指定的角度进行倾斜。

案例五：组合变换

你还可以组合多个变换来创建一个更复杂的效果。例如：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(50px, 100px) rotate(45deg) scale(1.5);
}

在这个例子中，.box 元素会首先向右移动50px，向下移动100px，然后顺时针旋转45度，最后放大到原来的1.5倍。这些变换会按照从左到右的顺序依次应用。

在这里插入图片描述

3D转换

在CSS中，3D转换是通过transform属性配合相关的3D转换函数来实现的。这些函数包括translate3d()、rotate3d()、scale3d()等，它们允许开发者在三维空间中移动、旋转和缩放元素。

基本概念

三维坐标系：三维空间由三个轴共同组成，即x轴、y轴和z轴。x轴水平向右，y轴垂直向下，而z轴则垂直屏幕。
旋转角度：在3D转换中，物体可以绕着x轴、y轴或z轴进行旋转。旋转角度可以用deg（度）来表示，例如rotateX(45deg)表示绕x轴旋转45度。
透视效果：通过透视效果可以模拟物体在空间中的位置，使元素看起来具有深度感。这可以通过perspective属性来实现。

使用方法

使用CSS3 3D转换时，你需要用到以下几个属性：

transform：用于指定变换形式，例如translate3d、scale3d、rotate3d等。
transform-origin：用于设置元素旋转或变形的中心点。
transform-style：用于控制子元素是否开启三维立体环境，例如transform-style: flat;（子元素不开启3D立体空间）和transform-style: preserve-3d;（子元素开启立体空间）。

3D转换函数

translate3d(x, y, z)：在三维空间中移动元素。其中x、y和z分别代表在x轴、y轴和z轴上的移动距离。
rotate3d(x, y, z, angle)：根据给定的x、y、z坐标和角度，绕一个通过原点的向量旋转元素。
scale3d(x, y, z)：在三维空间中缩放元素。其中x、y和z分别代表在x轴、y轴和z轴上的缩放比例。

示例

以下是一个简单的示例，展示如何使用translate3d和rotate3d来创建一个3D效果：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate3d(50px, 100px, 20px) rotate3d(1, 0, 0, 45deg);
}

在这个例子中，.box 元素首先会通过translate3d函数在三维空间中移动，然后通过rotate3d函数绕x轴旋转45度。

注意事项

在使用3D转换时，要注意浏览器兼容性问题，确保目标浏览器支持这些属性。
3D转换可能会对性能产生影响，特别是在移动设备上，因此在使用时要考虑性能优化。

CSS过渡效果

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。要实现这一点，必须规定两项内容：
- 规定希望把效果添加到哪个 CSS 属性上
- 规定效果的时长
- 效果触发时间（如鼠标hover等）

CSS过渡效果transition允许元素在一定时间内平滑地改变样式。这意味着，当你改变一个元素的某个CSS属性时，这个变化不是立即发生的，而是逐步过渡的。这为用户提供了更加自然和吸引人的视觉体验。

基本语法

要创建一个CSS过渡效果，你需要使用transition属性，它可以包含以下四个值：

transition-property：指定应用过渡效果的CSS属性。
transition-duration：定义过渡效果花费的时间，单位是秒（s）或毫秒（ms）。
transition-timing-function：规定过渡效果的速度曲线。
transition-delay：定义过渡效果何时开始。

在这里插入图片描述

这些值可以单独设置，也可以一起使用，以空格分隔。

示例

假设你有一个按钮，当你将鼠标悬停在上面时，你希望它的背景颜色在0.5秒内平滑地改变。你可以这样写CSS：

.button {
  background-color: blue;
  transition: background-color 0.5s ease;
}

.button:hover {
  background-color: red;
}

在这个例子中：

.button 类定义了按钮的初始背景颜色为蓝色，并设置了一个过渡效果，该效果将在背景颜色变化时应用。
transition 属性指定了background-color属性在0.5秒内平滑过渡，并使用ease速度曲线。
.button:hover 类定义了当鼠标悬停在按钮上时，背景颜色变为红色。

过渡属性简写

transition属性是一个简写属性，用于设置transition-property、transition-duration、transition-timing-function和transition-delay这四个属性。例如：

.element {
  transition-property: width, height;
  transition-duration: 2s, 4s;
  transition-timing-function: ease-in, ease-out;
  transition-delay: 1s, 0s;
}

/* 简写形式 */
.element {
  transition: width 2s ease-in 1s, height 4s ease-out;
}

过渡速度曲线

transition-timing-function 属性定义了过渡效果的速度曲线，它可以有几个预定义的值，如linear、ease、ease-in、ease-out、ease-in-out，或者使用cubic-bezier()函数来定义自定义的贝塞尔曲线。

注意事项（过渡元素）

过渡效果不能应用于所有CSS属性。通常，可以过渡的属性包括color、background-color、width、height、border、margin、padding、opacity、transform等。
过渡效果不会触发浏览器的重排或重绘，因此通常比动画（animations）性能更好。
过渡效果是单向的，即它们只在属性值变化时发生一次。如果你需要更复杂的效果，如循环动画，你应该使用CSS动画（animations）。

案例

下面是一个简单的CSS过渡效果案例，它展示了一个按钮在鼠标悬停时背景色和文本颜色平滑过渡的效果。

首先，我们需要创建一个HTML文件，并在其中添加一个按钮元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 过渡效果案例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<button class="transition-button">悬停我</button>

</body>
</html>

接下来，我们创建一个CSS文件（假设命名为styles.css），并在其中添加过渡效果的样式：

/* styles.css */

.transition-button {
  /* 初始样式 */
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #3498db;
  border: none;
  cursor: pointer;
  
  /* 过渡效果设置 */
  transition: background-color 0.5s ease, color 0.5s ease;
}

.transition-button:hover {
  /* 鼠标悬停时的样式 */
  background-color: #e74c3c; /* 背景色过渡为红色 */
  color: #ecf0f1; /* 文本色过渡为浅灰色 */
}

在这个例子中，.transition-button 类定义了按钮的初始样式，包括背景色、文本色、内边距等。transition 属性设置了两个过渡效果：背景色（background-color）和文本色（color），每个过渡的持续时间都是0.5秒，并且使用了ease速度曲线。

.transition-button:hover 伪类选择器定义了当鼠标悬停在按钮上时应用的样式。背景色从蓝色（#3498db）平滑过渡到红色（#e74c3c），同时文本色也从白色（white）平滑过渡到浅灰色（#ecf0f1）。

现在，当你打开这个HTML文件并在浏览器中查看时，你会发现当你把鼠标悬停在按钮上时，按钮的背景色和文本色会平滑地改变，而不是立即改变。这就是CSS过渡效果带来的视觉体验提升。

多项过渡（使用`,`隔开）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }

        .box:hover {
            width: 500px;
            height: 500px;
            background-color: red;
            transform: translate(100px,100px);
        }

        .box {
            transition: width 2s ease, height 2s ease, background-color 2s linear, transform 2s ease;
            /*宽度2s内过渡，高度2s内过渡，背景颜色2s内过渡，平移效果2s内过渡*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

transition-timing-function

transition-timing-function 是 CSS 中用于定义过渡效果速度曲线的属性。它决定了过渡效果在持续时间内的变化速率，即如何随时间改变属性值。这个属性可以让你控制过渡的“感觉”，例如是否加速、减速，或者是否保持匀速。

transition-timing-function 可以接受以下几种类型的值：

预定义值

linear：在整个过渡期间，属性值以相同的速度变化。
ease：默认值。开始时慢，然后变快，然后再变慢。
ease-in：开始时慢。
ease-out：结束时慢。
ease-in-out：开始时慢，然后变快，然后再慢下来。

贝塞尔曲线函数

你还可以使用 cubic-bezier() 函数来定义自定义的贝塞尔曲线。这个函数接受四个参数，这些参数定义了贝塞尔曲线的控制点。例如：

transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

这里的四个参数分别对应贝塞尔曲线的 P0、P1、P2 和 P3 点。P0 和 P3 通常是固定的（P0 为 (0,0)，P3 为 (1,1)），而 P1 和 P2 则用于控制曲线的形状。通过调整这四个点的位置，你可以创建各种复杂的过渡效果。

步骤函数

你还可以使用 steps() 函数来创建离散的过渡效果，这在一些动画中很有用，比如帧动画。

transition-timing-function: steps(5, start);

这里的第一个参数是步骤数，第二个参数可以是 start 或 end，用来确定每一步的开始或结束时的状态。

使用示例

假设你有一个元素，你希望其宽度在 2 秒内从 100px 过渡到 300px，并且希望这个过程开始时慢，然后变快：

.element {
  width: 100px;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: ease-in; /* 开始时慢 */
}

.element:hover {
  width: 300px;
}

在这个例子中，.element 的宽度会在鼠标悬停时从 100px 过渡到 300px，并且由于使用了 ease-in，过渡效果在开始时会比较慢。

扩展（解决兼容性）

-o-transition

-o-transition 是一个前缀版本的 CSS 过渡属性，主要用于兼容 Presto 引擎的浏览器，如较旧版本的 Opera 浏览器。这个前缀属性用于定义元素在一定时间范围内平滑地改变其 CSS 属性值的效果。

在较新的浏览器版本中，对标准 transition 属性的支持已经相当普遍，因此通常不再需要使用带有浏览器前缀的版本。但在过去，为了确保过渡效果能在所有浏览器中正常工作，开发者经常需要为不同的浏览器引擎编写特定的前缀版本。

-o-transition 的语法与其他浏览器前缀版本的 transition 属性类似，它接受相同的参数来定义过渡的各个方面，如过渡属性、持续时间、时间函数和延迟。

例如：

div {
  -o-transition: width 2s ease-in-out 0.5s;
}

在这个例子中，-o-transition 属性告诉 Opera 浏览器（使用 Presto 引擎的版本）在 2 秒内平滑地改变 div 元素的 width 属性，使用 ease-in-out 时间函数，并在过渡开始前延迟 0.5 秒。

-moz-transition

-moz-transition 是一个特定于 Mozilla Firefox 浏览器的 CSS 属性前缀，用于定义元素属性变化的过渡效果。这个前缀在早期的 Firefox 版本中特别重要，因为那时标准的 transition 属性可能还未得到全面支持。通过使用 -moz-transition，开发者可以确保过渡效果在 Firefox 浏览器中正确显示。

-moz-transition 的语法与标准的 transition 属性类似，它接受相同的参数来定义过渡的各个方面，如过渡属性、持续时间、时间函数（缓动函数）和延迟。

例如：

div {
  -moz-transition: width 2s ease-in-out;
}

在这个例子中，-moz-transition 属性指定了一个过渡效果，当 div 元素的 width 属性改变时，过渡将持续 2 秒，并使用 ease-in-out 缓动函数。

-webkit-transition

-webkit-transition 是 CSS3 中的一个属性，主要用于兼容基于 WebKit 内核的浏览器（如 Chrome 和 Safari）。它允许你在一定时间内平滑地改变一个元素的 CSS 属性值。

该属性通常包括以下几个部分：

-webkit-transition-property：指定应用过渡效果的 CSS 属性，例如 width、height、color 等。也可以使用 all 来表示所有可过渡属性。
-webkit-transition-duration：定义过渡效果的持续时间，以秒（s）或毫秒（ms）为单位。
-webkit-transition-timing-function：规定过渡效果的时间曲线，如 ease、linear、ease-in、ease-out、ease-in-out 等，或者更复杂的 cubic-bezier(n,n,n,n) 函数。
-webkit-transition-delay：规定过渡效果开始前的延迟时间。

例如：

div {
  -webkit-transition: width 2s ease-in-out 0.5s;
}

在这个例子中，-webkit-transition 属性告诉基于 WebKit 内核的浏览器，在 2 秒内平滑地改变 div 元素的 width 属性，使用 ease-in-out 时间函数，并在过渡开始前延迟 0.5 秒。

CSS动画效果

css3也提供基于css的动画效果，这种效果可以取代动画图片、Flash 动画以及 JavaScript。
在css中，@keyframes规则可以使用来创建动画，创建动画是通过逐步改变从一个CSS样式到
另一个CSS样式，在动画过程中，您可以更改CSS样式的设定多次，指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同，0％是开头动画，100％是当动画完成。为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。
@keyframes规则是css3中新增规则，目前主流浏览器都支持该规则（加浏览器对应的前缀），但不兼容IE 9以及更早版本的浏览器。

@keyframes规则由@keyframes关键字开始，后跟一个标识符（动画名称），然后是一组样式规则（用大括号分隔）。这些样式规则定义了在动画的特定关键帧处元素的状态。

语法如下：

@keyframes animation-name {
  keyframes-selector {
    css-styles;
  }
}

其中：

animation-name：动画的名称，它将作为引用时的唯一标识。自定义。
keyframes-selector：关键帧选择器，用于指定当前关键帧在动画过程中的位置。它可以是一个百分比（如0%或100%），或者from和to关键字，其中from和0%效果相同，表示动画的开始，to和100%效果相同，表示动画的结束。
css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义。

例如，一个简单的动画效果可能如下：

@keyframes appear {
  0% {
    opacity: 0; /* 动画开始时的状态，完全透明 */
  }
  100% {
    opacity: 1; /* 动画结束时的状态，完全不透明 */
  }
}

在这个例子中，appear是动画的名称，0%和100%是关键帧选择器，分别定义了动画开始和结束时的状态。opacity属性用于控制元素的透明度，从完全透明（0）过渡到完全不透明（1）。

通过在其他CSS规则中使用animation属性，并将animation-name设置为上面定义的动画名称，就可以将这个动画效果应用于HTML元素。

需要注意的是，@keyframes规则定义的动画效果本身不会直接应用到任何元素上，需要通过animation属性来引用和应用。同时，由于浏览器兼容性问题，有时可能需要在@keyframes前面添加浏览器前缀（如-webkit-、-moz-等）。

动画属性

在这里插入图片描述

animation-name

自定义名称

animation-name 是 CSS 中 animation 属性的一部分，用于指定应用到元素的 @keyframes 动画的名称。这个属性是动画属性的关键部分，因为它确定了哪个 @keyframes 规则集将用于创建动画效果。

语法如下：

animation-name: keyframename | none;

其中：

keyframename：指的是之前定义的 @keyframes 规则的名称。可以指定多个动画名称，用逗号分隔。
none：表示不应用任何动画。

例如，如果你有一个名为 example 的 @keyframes 动画，你可以这样应用它：

@keyframes example {
  0% { background-color: red; }
  50% { background-color: blue; }
  100% { background-color: green; }
}

div {
  animation-name: example;
  /* 其他动画属性，如 duration, timing-function, iteration-count 等 */
}

在这个例子中，div 元素将会按照 example 动画定义的规则，从红色背景渐变到蓝色，然后再渐变到绿色。

需要注意的是，animation-name 只是动画属性的一个部分。要创建完整的动画效果，通常还需要设置其他动画属性，如 animation-duration（动画持续时间）、animation-timing-function（动画速度曲线）、animation-delay（动画延迟时间）和 animation-iteration-count（动画播放次数）。

这些动画属性可以单独设置，也可以合并到一个 animation 简写属性中，如下所示：

div {
  animation: example 5s ease-in-out 2s infinite;
}

在这个简写示例中，example 是动画名称，5s 是动画持续时间，ease-in-out 是动画速度曲线，2s 是动画延迟时间，infinite 是动画播放次数（无限次）。

最后，为了确保动画在所有浏览器中都能正常工作，可能需要在 animation-name 和其他动画属性前加上浏览器前缀（如 -webkit-、-moz-、-o- 和 -ms-），以兼容旧版本的浏览器。

animation-iteration-count

animation-iteration-count 是 CSS 动画属性之一，用于指定动画应重复播放的次数。它允许你控制动画从开始到结束的循环次数。
这个属性的值可以是正整数，表示动画应该播放的次数，或者是 infinite，表示动画应该无限次地播放。

语法如下：

animation-iteration-count: n | infinite;

其中：

n：一个正整数，表示动画应该播放的次数。
infinite：表示动画应该无限次地播放。

animation-iteration-count 属性的默认值是 1，这意味着动画将只播放一次，除非明确指定了其他值。

例如，如果你想要一个动画播放 3 次，你可以这样设置：

div {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-iteration-count: 3;
}

在这个例子中，div 元素上的动画 myAnimation 将播放 3 次，每次持续 2 秒。

如果你想要动画无限次地播放，你可以设置 animation-iteration-count 为 infinite：

div {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

这样，div 元素上的动画 myAnimation 将无限次地播放，每次持续 2 秒。

此外，animation-iteration-count 通常与其他动画属性（如 animation-name、animation-duration、animation-timing-function 等）一起使用，以创建完整的动画效果。这些属性可以单独设置，也可以合并到一个 animation 简写属性中。

animation-direction

animation-direction 是 CSS 动画属性之一，它定义了在动画周期结束时是否应该反向播放动画。这个属性为动画提供了更多的灵活性和变化性。

animation-direction 的值可以是以下几种：

normal：默认值，表示动画应正常播放。每个动画周期结束后，动画将从头开始，不会反向播放。
reverse：动画反向播放。这意味着动画将从结束状态开始，然后按照正常的顺序播放到开始状态。
alternate：动画在每次迭代后反向播放。即奇数次数（1、3、5等）正常播放，偶数次数（2、4、6等）反向播放。
alternate-reverse：动画在第一次迭代时反向播放，然后在每次迭代后反向播放。这与 alternate 类似，但第一次迭代的方向是相反的。

语法如下：

animation-direction: normal | reverse | alternate | alternate-reverse;

例如，如果你想要一个动画在每次迭代后反向播放，你可以这样设置：

div {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-iteration-count: 3;
  animation-direction: alternate;
}

在这个例子中，div 元素上的动画 myAnimation 将播放 3 次，每次持续 2 秒。动画将在第1次正常播放，第2次反向播放，第3次再次正常播放，以此类推。

需要注意的是，如果动画设置为只播放一次（animation-iteration-count 为 1），则 animation-direction 属性将没有效果，因为动画没有机会进行第二次迭代。

此外，当使用 animation-direction 属性时，建议检查目标浏览器的兼容性情况，以确保动画能够正确显示。不同的浏览器可能需要使用特定的前缀（如 -webkit-、-moz- 等）来支持这个属性。

animation-direction 与其他动画属性（如 animation-name、animation-duration、animation-timing-function、animation-iteration-count 等）结合使用，可以创建出各种复杂的动画效果。

animation-play-state

animation-play-state 是 CSS 动画属性中的一个关键属性，它用于控制动画的播放状态。具体来说，它允许你暂停或继续动画的播放，而无需重新开始动画。

animation-play-state 的值可以是以下两种之一：

running：表示动画正在播放。这是默认值，如果未明确设置 animation-play-state，则动画将处于此状态。
paused：表示动画已暂停。当动画处于此状态时，它将停止在当前帧，直到 animation-play-state 被设置为 running。

语法如下：

animation-play-state: running | paused;

例如，如果你想要暂停一个正在播放的动画，你可以这样设置：

div {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-play-state: paused;
}

在这个例子中，div 元素上的动画 myAnimation 将被暂停，即使它的持续时间设置为 2 秒。要重新开始播放动画，你可以将 animation-play-state 设置为 running。

需要注意的是，animation-play-state 只对通过 CSS 定义的动画有效。对于通过 JavaScript 或其他脚本语言实现的动画，这个属性将无效。

此外，虽然大多数现代浏览器都支持 animation-play-state 属性，但在使用之前，最好检查目标浏览器的兼容性情况，以确保动画能够正确显示。一些较旧的浏览器版本可能不支持这个属性，或者可能需要使用特定的前缀（如 -webkit-、-moz- 等）来支持它。

animation-play-state 属性与其他动画属性（如 animation-name、animation-duration、animation-timing-function 等）结合使用，可以创建出更加灵活和交互式的动画效果。

animation-fill-mode

animation-fill-mode 是 CSS3 中的一个动画属性，它规定了在动画不播放时（即在动画完成或延迟未开始播放时）应用到元素的样式。默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。而 animation-fill-mode 属性可以重写这个默认行为。

animation-fill-mode 的语法如下：

animation-fill-mode: none | forwards | backwards | both;

这个属性的各个值具体含义如下：

none：默认值，不改变默认行为。
forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，即在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用，即在动画开始前应用开始属性值，并在动画结束后保持结束属性值。

请注意，Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。

在 CSS 中，animation-fill-mode 可以与 animation 简写属性中的其他动画属性（如 animation-name、animation-duration、animation-delay 等）一起使用，以创建复杂的动画效果。例如：

.example {
  animation-name: myAnim;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  /* 其他动画属性 */
}

在这个例子中，.example 元素上的动画 myAnim 将在 2 秒内播放，并在动画完成后保持最后一个关键帧的状态，这得益于 animation-fill-mode: forwards; 的设置。

CSS渐变

CSS渐变是一种在两种或多种颜色之间平滑过渡的效果，可以应用于背景、边框等属性。CSS 提供了两种类型的渐变：线性渐变（linear-gradients）和径向渐变（radial- gradients）

线性渐变

线性渐变沿直线平滑地过渡颜色。你可以指定渐变的方向（角度或边）以及每种颜色的位置。

语法：

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

示例：

.gradient-box {
  width: 200px;
  height: 100px;
  background-image: linear-gradient(to right, red, yellow);
}

方向

to right
to left
to top
to bottom
45deg：45°方向

在这个例子中，.gradient-box 元素的背景色从左到右从红色平滑过渡到黄色。

径向渐变

径向渐变从中心点向外围平滑地过渡颜色。你可以指定渐变的形状（圆形或椭圆形）以及每种颜色的位置。

语法：

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

示例：

.gradient-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: radial-gradient(circle, red, yellow, green);
}

在这个例子中，.gradient-circle 元素的背景色从中心点向外围从红色过渡到黄色，然后过渡到绿色，形成一个圆形渐变。

自定义颜色和位置

你可以为渐变指定任意数量的颜色，并可以指定每种颜色的位置（以百分比或长度单位）。

.custom-gradient {
  background-image: linear-gradient(to right, red 20%, yellow 50%, green 80%);
}

在这个例子中，渐变在20%的位置开始变为红色，在50%的位置变为黄色，在80%的位置变为绿色。

角度和颜色方向

对于线性渐变，你可以使用角度来指定渐变的方向，而不是使用关键字（如 to right）。

.angled-gradient {
  background-image: linear-gradient(45deg, red, yellow);
}

透明度渐变

你还可以在渐变中使用透明度（rgba 颜色）。

.transparent-gradient {
  background-image: linear-gradient(to right, rgba(255,0,0,1) 0%, rgba(255,0,0,0) 100%);
}

在这个例子中，红色从左到右渐变到透明。

CSS多列

=CSS多列布局允许你将内容分成多列，就像报纸或杂志上的文章那样==。通过使用 CSS3 的多列属性，你可以轻松控制列数、列宽、列间距以及列之间的空白区域。

以下是 CSS3 中用于多列布局的主要属性：

column-count: 定义元素的列数。
column-width: 定义每列的宽度。
column-gap: 定义列之间的间距。
column-rule: 是 column-rule-width、column-rule-style 和 column-rule-color 的简写属性，用于定义列之间的线条样式。
column-span: 定义元素应横跨多少列。
column-fill: 定义如何填充列。
columns：column-width和column-count的简写

column-rule-style

CSS中的column-rule-style属性用于定义多列布局中列与列之间分隔线的样式。这个属性对于提升多列布局的可读性和视觉效果非常有用。

column-rule-style可以接受以下值：

none：无规则，即不显示分隔线。
hidden：隐藏规则，与none类似，但不占用空间。
dotted：点线，分隔线由点组成。
dashed：虚线，分隔线由短划线组成。
solid：实线，分隔线为连续的线。
double：双线，分隔线由两条平行的线组成。
groove：凹槽线，分隔线看起来像是刻在背景中。
ridge：脊线，分隔线看起来像是从背景中突出。
inset：内嵌线，分隔线使内容区域看起来像是嵌入了背景。
outset：外嵌线，分隔线使内容区域看起来像是从背景中突出。

你可以这样使用column-rule-style属性：

div {
  -moz-column-rule-style: dotted; /* Firefox */
  -webkit-column-rule-style: dotted; /* Safari 和 Chrome */
  column-rule-style: dotted;
}

请注意，column-rule-style属性仅适用于多栏布局。如果你希望同时设置分隔线的宽度、样式和颜色，可以使用column-rule属性。此外，为了确保兼容性，你可能需要为不同的浏览器提供前缀版本的属性。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            column-count: 3;
            column-gap: 50px;
            column-rule: 5px outset red;
        }
    </style>
</head>
<body>
    <div class="box">
        当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了
些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一
下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变
我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我
甚至可能改变这个世界。
    </div>
</body>
</html>

注意事项

column-count 和 column-width 属性可以同时使用，但它们之间会存在优先级问题。如果同时设置了这两个属性，浏览器会尝试根据可用空间来调整列数或列宽，以满足这两个条件。
column-span 属性通常用于 <h1>、<h2> 等标题元素，使它们能够横跨所有列。
多列布局在某些老版本的浏览器中可能不受支持，因此在使用之前最好检查目标浏览器的兼容性。

^～^前行者～～～

关注

36
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS样式进阶

linear：在整个过渡期间，属性值以相同的速度变化。ease：默认值。开始时慢，然后变快，然后再变慢。ease-in：开始时慢。ease-out：结束时慢。：开始时慢，然后变快，然后再慢下来。你可以为渐变指定任意数量的颜色，并可以指定每种颜色的位置（以百分比或长度单位）。在这个例子中，渐变在20%的位置开始变为红色，在50%的位置变为黄色，在80%的位置变为绿色。
复制链接

扫一扫