大屏动画效果

coinisi_li

已于 2024-06-26 08:58:54 修改

阅读量488

点赞数 18

文章标签：前端

于 2024-06-25 15:34:39 首次发布

本文链接：https://blog.csdn.net/coinisi_li/article/details/139960445

版权

`nimation` 是一个用来定义动画的缩写属性，包含了多个子属性，如动画名称、动画时长、动画速度曲线、延迟时间和播放次数等信息。

`一、animation: cross 5s infinite;`

动画描述：这个动画描述了一个元素从不可见到可见，再从右侧移动到左侧，并且再次不可见的过程。

@keyframes cross {
  0% {
    opacity: 0;
  }
  50% {
    right: 0;
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

0%：元素的透明度为 0，即不可见。
50%：元素位于右侧（right: 0），透明度为 1，即完全可见。
100%：元素位于左侧（left: 100%），透明度为 0，即不可见。

`1）opacity` 属性表示元素的透明度。`opacity` 的值可以在 0 到 1 之间，数值越接近 0，元素越透明；数值越接近 1，元素越不透明。例如：

opacity: 0; 表示完全透明，元素不可见。
opacity: 1; 表示完全不透明，元素完全可见。
opacity: 0.5; 表示半透明，元素的透明度为 50%。

`2）@keyframes` 规则用于创建动画序列，它定义了动画在不同时间点（关键帧）上的状态和样式变化。关键帧的时间点使用百分比或具体的时间值来表示。

0% 表示动画开始时的状态，即动画开始时元素的样式。
50% 表示动画进行到一半时的状态，即元素经过一定时间后的样式。
100% 表示动画结束时的状态，即动画结束时元素的样式。

`3）rotate` 是一个变换函数，用于对元素进行旋转。`rotate` 函数接受一个角度值作为参数，这个角度值可以用不同的单位表示，常见的是使用度数（degrees，缩写为 `deg`）作为单位。

关于 `rotate` 函数和 `deg` 单位：

rotate 函数：
- rotate() 是 CSS3 提供的变换函数之一，用于对元素进行旋转操作。
- 它可以用来指定元素围绕原点旋转的角度。
- 角度可以是正值（顺时针方向）或负值（逆时针方向）。
deg 单位：
- deg 是度数的单位，用来度量角度大小。
- 1 度（degree）等于圆周的 1/360 部分。
- 在 rotate 函数中，deg 后面的数值表示角度大小，例如 rotate(45deg) 表示元素顺时针旋转 45 度。

其他角度单位：

除了 deg，还有 rad（弧度）、grad（梯度）等角度单位，不过在日常使用中，deg 是最常见和直观的角度单位，特别是在 CSS 的旋转和变换功能中使用频率很高。

4）`linear` 是一种动画速度曲线（timing function），它指定了动画效果在整个动画持续时间内的速度变化方式。具体来说，`linear` 表示动画会以恒定的速度进行变化，即动画效果在整个过程中速度是匀速的，不会有加速或减速的效果。

5）如果不指定动画的速度曲线（即不使用 `linear` 或其他任何预设的曲线），CSS 动画会默认使用 `ease` 曲线。`ease` 曲线是一种缓慢加速然后再缓慢减速的效果，通常用于使动画效果更加自然和流畅，尤其是对于大多数 UI 元素而言。

`二、animation: turnX2 5s linear infinite;`

动画描述：这个动画描述了一个元素从初始状态旋转 360 度，然后再旋转回到初始状态。

关键帧定义：

@keyframes turnX2 {
  0% {
    -webkit-transform: rotate(360deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(0);
  }
}

0%：元素旋转 360 度。
50%：元素旋转到 180 度。
100%：元素回到初始状态（0 度）。

动画时间和重复

两者都设置了动画时间为 5 秒 (5s) 并且无限循环 (infinite)。
cross 动画没有指定动画速度曲线，默认是 ease。
turnX2 动画指定了线性速度曲线 (linear)，使得旋转效果在整个过程中速度均匀。

兼容性

cross 动画：由于使用的是常见的 CSS 属性（opacity、right 和 left），大多数现代浏览器都能很好地支持。
turnX2 动画：使用了 -webkit-transform，这是一个带有浏览器前缀的属性，主要是为了确保在一些老版本的 WebKit 浏览器（例如旧版的 Safari 和 Chrome）中也能正常工作。在现代浏览器中，可以不需要 -webkit- 前缀。

三、一个简单的背景图像位置变化的动画效果：

.title {
  display: inline-block;
  font-size: 2.25rem;
  font-family: PangMenZhengDao;
  font-weight: 400;
  line-height: 4.25rem;
  height: 3.6875rem;
  margin: auto;
  color: transparent; /* 文字颜色透明 */
  background-color: #78f0fd; /* 文字背景色 */
  background-image: linear-gradient(to right, #78f0fd, #fff, #78f0fd); /* 渐变背景 */
  -webkit-background-clip: text; /* 设置背景裁剪为文字 */
  background-size: 30%; /* 背景大小 */
  background-repeat: no-repeat; /* 背景不重复 */
  background-position: -30%; /* 背景位置偏移 */
  animation: move linear 2s infinite; /* 应用名为 move 的线性动画，时长 2 秒，无限循环 */
}

@keyframes move {
  from {
    /* 动画开始时没有显式定义任何样式属性 */
  }
  to {
    background-position: 140%; /* 背景图像位置在 x 轴方向上移动到其自身宽度的 140% 处 */
  }
}

`@keyframes move` 规则解释：

from 关键帧：
- from 表示动画开始的状态，等同于 0%。
- 在这个例子中，from 没有具体定义任何样式属性，因此动画从元素原有的样式开始，没有显式的变化。
to 关键帧：
- to 表示动画结束的状态，等同于 100%。
- 在这个例子中，定义了 background-position: 140%;。
  - background-position: 140%; 意味着背景图像的位置在 x 轴方向上移动到其自身宽度的 140% 处。这种设置通常用于背景图像在元素内部的移动效果。

.title 类应用于某个元素（例如标题），通过以下样式定义了其外观和动画效果：
- display: inline-block;：使元素表现为内联块级元素，可以控制其宽度和高度。
- font-size: 2.25rem;：设置字体大小为 2.25 倍的根元素字体大小。
- font-family: PangMenZhengDao;：指定使用字体家族为 "PangMenZhengDao"。
- font-weight: 400;：设置字体粗细为正常（400）。
- line-height: 4.25rem;：设置行高为 4.25 倍的根元素字体大小。
- height: 3.6875rem;：设置元素高度为 3.6875rem。
- margin: auto;：使元素在其容器中水平居中。
- color: transparent;：使文字颜色透明，实际上是通过背景图像显示文字内容。
- background-color: #78f0fd;：设置文字背景色为淡蓝色。
- background-image: linear-gradient(to right, #78f0fd, #fff, #78f0fd);：设置文字背景为水平渐变，从淡蓝色到白色再到淡蓝色。
- -webkit-background-clip: text;：设置背景裁剪为文字，使得背景渐变仅显示在文字部分。
- background-size: 30%;：设置背景大小为原始大小的 30%。
- background-repeat: no-repeat;：设置背景不重复。
- background-position: -30%;：设置背景位置向左偏移，以便渐变背景的起始部分显示在文字的左侧。
- animation: move linear 2s infinite;：应用名为 move 的动画序列，使用线性速度曲线，时长为 2 秒，无限循环播放。
@keyframes move 定义了 move 动画序列，控制背景位置的变化：
- from 部分表示动画开始时的状态，此处没有显式定义任何属性，因此动画从元素的当前状态开始。
- to 部分表示动画结束时的状态，设置背景图像位置在 x 轴方向上移动到其自身宽度的 140% 处。

这样的设置使得元素的背景在动画过程中以线性速度从左向右移动，同时背景色渐变和文字颜色透明效果增强了视觉上的动感和吸引力。

这样设置的目的是为了创建一种特定的视觉效果，通常用于实现文字颜色渐变或者动态效果。让我逐步解释每个属性的作用和如何结合使用来实现预期的效果：

color: transparent;
- color: transparent; 将文字的颜色设置为透明。这意味着文字本身将不显示任何实际的颜色，但仍然会占据空间。
background-color: #78f0fd;
- background-color: #78f0fd; 设置文字的背景颜色为淡蓝色 #78f0fd。因为文字颜色是透明的，所以实际上看不到这个颜色，但这个属性是为了确保在没有背景图像时，文字背后有一个统一的背景色。
background-image: linear-gradient(to right, #78f0fd, #fff, #78f0fd);
- background-image: linear-gradient(to right, #78f0fd, #fff, #78f0fd); 创建一个水平渐变背景图像。这个渐变从淡蓝色 #78f0fd 开始，到白色 #fff，再到淡蓝色 #78f0fd 结束。这样做的目的是为了给文字的背景区域添加视觉上的渐变效果。
-webkit-background-clip: text;
- -webkit-background-clip: text; 将背景裁剪设置为 text。这个属性告诉浏览器只在文字的区域内显示背景图像，而不是整个元素的背景。
background-size: 30%;
- background-size: 30%; 设置背景图像的大小为元素宽度的 30%。这样可以控制渐变的范围，使其只覆盖文字的部分区域。
background-repeat: no-repeat;
- background-repeat: no-repeat; 禁止背景图像的重复。这确保了渐变背景只出现一次，而不会重复覆盖整个文字区域。
background-position: -30%;
- background-position: -30%; 将背景图像向左偏移 30% 的距离。这个偏移量是相对于背景图像的初始位置的百分比，用来调整渐变的起始位置，使其更适合于视觉效果的需求。