4 个简单的 CSS 悬停过渡效果，适用于元素背景

本视频将向您展示在可点击元素上执行 CSS 背景过渡的 4 种不同方法。CSS 过渡非常有用，尤其是在移动设备和平板电脑上，通常不再有可点击的标题或按钮（例如 readme）。取而代之的是，整个元素都是可点击的。

拥有美观的 CSS 悬停效果可以让桌面用户知道这些元素是可点击的。您可以使用 CSS 和过渡效果以多种不同的方式实现这一点。

我们将看看：

背景颜色变化
使用过渡
使用特殊的 CSS 元素，例如 :before
应用不同的过渡效果，例如：
使用绝对值进行自上而下的过渡
使用 border-radius 创建圆形过渡
使用边框宽度创建角度过渡

背景过渡 1

只需通过平滑过渡改变背景

.v1 {
  过渡：0.25s 缓解背景；
  &:悬停{
    背景：#e1e1e1；
  }
}

背景过渡 2

将覆盖层从顶部滑动到底部

.v2 {
  位置：相对；
  溢出：隐藏；
  h2,.img,p {
    位置：相对；
  }
  ＆：前 {
    内容：””;
    显示：块；
    位置：绝对；
    顶部：0；
    左：0；右：0；
    底部：100％；
    背景：#e1e1e1；
    过渡：0.25s 缓和底部；
  }
  &:悬停{
    ＆：前 {
      底部：0%；
    }
  }
}

背景过渡 3

创建一个从中间扩展的圆圈

.v3 {
    位置：相对；
    溢出：隐藏；
    h2,.img,p {
        位置：相对；
    }
    ＆：前 {
        内容：””;
        显示：块；
        位置：绝对；
        最高：50%；
        剩余：50%；
        边框半径：50%；
        宽度：0%；
        顶部填充：0%；
        变换：平移（-50%，-50%）；
        背景：#e1e1e1；
        过渡：0.5s 缓解填充顶部，0.5s 缓解宽度；
    }
    &:悬停{
        ＆：前 {
            宽度：150%；
            顶部填充：150%；
        }
    }
}

背景过渡 4

创建一个从右上角到左下角的角度

.v4 {
    位置：相对；
    溢出：隐藏；
    h2,.img,p {
        位置：相对；
    }
    ＆：前 {
        内容：””;
        显示：块；
        位置：绝对；
        顶部：0；
        左：0；
        宽度：0px；
        高度：0px；
        边框样式：实心；
        边框宽度：0px 0px 0 0；
        边框颜色：#e1e1e1 透明透明透明；
          过渡：0.5s 缓解边框宽度；
    }
    &:悬停{
        ＆：前 {
            边框宽度：800px 800px 0 0；
        }
    }
}

想要了解更多：

我会尽力每天发布新的精彩内容。以下是最新内容：

鏂囩珷鏉ユ簮锛�https://dev.to/adriantwarog/4-simple-css-hover-transitions-for-your-elements-background-4mlg