使用 CSS 设置悬停效果的速度

要使用 CSS 设置悬停效果的速度，我们将采用两种不同的方法。这些方法包括使用 CSS transition 和 CSS animation 属性。

我们有一个 按钮 和一个 div 元素，它们在悬停时会更改样式。我们的任务是使用 CSS 设置 悬停 效果的速度。

使用 CSS 设置悬停效果速度的方法

以下是使用 CSS 设置悬停效果速度的方法列表，我们将在本文中逐步讲解并提供完整的示例代码。

使用 transition 属性设置速度

为了设置悬停效果的速度，我们使用了 CSS transition-duration 属性。

示例

这是一个完整的示例代码，实现了上述步骤，以使用 CSS 设置悬停效果的速度。

<!DOCTYPE html>
<html>
   <head>
    <title>
        Set the speed of the hover effect with CSS
    </title>
      <style>
         .btn {
            background-color: yellow;
            color: black;
            text-align: center;
            font-size: 15px;
            padding: 20px;
            border-radius: 15px;
            border: 3px dashed  rgb(38, 2, 45);
            transition-duration: 1s;
         }
         .btn:hover {
            background-color: #04af2f;
            color: white;
            border: 3px solid  rgb(38, 2, 45);
         }

      </style>
   </head>
   <body>
    <h3>
        Set the speed of the hover effect with CSS
    </h3>
    <p>
        In this example we have used CSS transition-
        duration property to Set the speed of the 
        hover effect with CSS.
    </p>
      <h4>Hover over this button to see the effect.</h4>
      <button class = "btn">Result</button>
   </body>
</html>

使用 animation 属性设置速度

在这种方法中，我们使用了 CSS animation-duration 属性来设置悬停效果的速度。

  • 我们使用 div 标签创建了一个名为 box 的盒子。
  • 我们使用了 box 类来使用 CSS height、width 和 background-color 属性来设置盒子的样式。
  • 我们使用 '@keyframes speed' 设置了初始、50% 和 100% 的动画。
  • 我们使用了 box:hover 类来设置悬停时的动画效果，它定义了 animation-name 和 animation-timing-function。
  • 我们使用了 'animation-duration: 0.9s;' 属性来设置悬停效果的速度。

示例

这是一个完整的示例代码，实现了上述步骤，以使用 CSS 设置悬停效果的速度。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Set the speed of the hover effect with CSS
    </title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: rgb(38, 2, 45);
        }
        @keyframes speed {
            0% {
                width: 100px;
                height: 100px;
                background-color: rgb(38, 2, 45);
            }
            50% {
                width: 150px;
                height: 150px;
                background-color: rgb(156, 141, 252);
            }
            100% {
                width: 200px;
                height: 200px;
                background-color: #04af2f;
            }
        }
        .box:hover {
            animation: speed ease forwards;
            animation-duration: 0.9s;
        }
    </style>
</head>
<body>
    <h3>
        Set the speed of the hover effect with CSS
    </h3>
    <p>
        In this example we have used CSS animation-
        duration property to Set the speed of the 
        hover effect with CSS.
    </p>
    <div class="box"></div>
</body>
</html>

结论

在本文中，我们讨论并理解了使用 CSS transition-duration 和 animation-duration 属性来设置 CSS 悬停效果速度的两种方法。

更新于：2024年8月6日

13K+ 次浏览

开启你的 职业生涯

完成课程获得认证

开始学习
广告