具有多个属性的 CSS 过渡

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

具有多个属性的 CSS 过渡

作者：迹忆客最近更新：2023/04/27 浏览次数：

用于设置网页样式的语言称为 CSS，代表层叠样式表。 CSS 解释了 HTML 组件应该如何出现在屏幕、纸张或其他媒体上。

通过 CSS 节省了大量工作。它可以同时管理多个网页的设计。

在 CSS 文件中，保留了外部样式表。

CSS 的过渡属性

CSS 过渡是为您的组件设置动画的最快（也是最干净）的方式。在本教程中了解 CSS 转换的功能以及如何使用它们创建动画。

当 CSS 属性随时间从一个值切换到另一个值时，就会发生转换。四个 CSS 属性：transition-property、transition-duration、transition-timing-function 和 transition-delay 组合在一起形成了 transition 属性。

示例代码：

.selector {
transition-property: property;
transition-duration: duration;
transition-timing-function: timing-function;
transition-delay: delay}

我们还可以在一个语句中使用上述所有四个属性，如以下代码示例所示。

.selector {
transition: property duration timing-function delay;
}

如何在 CSS 中触发过渡

CSS 过渡可以通过使用伪类立即触发，例如悬停（当鼠标悬停在元素上时激活）、焦点（当用户单击输入元素或标签进入元素时激活）或活动（当鼠标悬停时激活）用户点击元素）。

悬停触发过渡

transition 属性可以通过悬停触发，如下例所示。

<!DOCTYPE html>
<html>
    <head>
        <style>
        body {
            display: flex;
            min-height: 50vh;
            justify-content: center;
            align-items: center;
        }
        .button {
            font-size: 3em;
            font-family: inherit;
            border: none;
            background-color: #33ae74;
            padding: 0.5em 0.75em;
            transition: background-color 0.5s ease-out;
        }
        .button:hover {
            background-color: lightgreen;
        }
        </style>
    </head>
    <body>
        <button class="button">Trigger Transition with hover</button>
    </body>
</html>

输出:

Trigger Transition with hover

Transition on hover

单击触发过渡

您可以通过单击激活转换，如下例所示。只需单击一下即可激活过渡颜色。

示例代码：

<!DOCTYPE html>
<html>
   <head>
      <style>
      body {
      display: flex;
      min-height: 50vh;
      justify-content: center;
      align-items: center;
      }
      .button {
      font-size: 3em;
      font-family: inherit;
      border: none;
      background-color: #33ae74;
      padding: 0.5em 0.75em;
      transition: background-color 0.5s ease-out;
      }
      .button.is-active {
      background-color: lightblue;
      }
      </style>
  </head>
      <body>
          <button class="button">Trigger Transition with click</button>
      </body>
</html>
<script>
const button = document.querySelector('.button');
button.addEventListener('click', _ => button.classList.toggle('is-active'));
</script>