鼠标hover button按钮背景颜色动画渐变切换特效

最新推荐文章于 2021-11-11 09:57:38 发布

李泽举

最新推荐文章于 2021-11-11 09:57:38 发布

阅读量1.4k

点赞数 2

分类专栏：前端踩坑合集

本文链接：https://blog.csdn.net/weixin_45895806/article/details/108083975

版权

前端踩坑合集专栏收录该内容

99 篇文章 44 订阅

订阅专栏

自定义鼠标hover按钮时,botton的背景颜色渐变效果

<!DOCTYPE html>

<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      font-family: 'Montserrat', sans-serif;
      margin: 0;
    }

    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
      flex-wrap: wrap;
      width: 80vw;
      margin: 0 auto;
      min-height: 100vh;
    }

    .btn {
      flex: 1 1 auto;
      margin: 10px;
      padding: 30px;
      text-align: center;
      text-transform: uppercase;
      transition: 0.5s;
      background-size: 200% auto;
      color: white;
      box-shadow: 0 0 20px #eee;
      border-radius: 10px;
    }


    .btn:hover {
      background-position: right center;
    }

    .btn-1 {
      background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
    }

    .btn-2 {
      background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
    }

    .btn-3 {
      background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
    }

    .btn-4 {
      background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);
    }

    .btn-5 {
      background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 51%, #ffecd2 100%);
    }
  </style>
</head>

<body>
  <div class="container">
    <a class="btn btn-1">Hover me</a>
    <a class="btn btn-2">Hover me</a>
    <a class="btn btn-3">Hover me</a>
    <a class="btn btn-4">Hover me</a>
    <a class="btn btn-5">Hover me</a>
  </div>
</body>

</html>

附言:
浏览器对js动画的性能消耗要高于css样式的动画,尽可能的选择css样式做动画
当然,如果需要多帧,循环的动画还是建议使用animation定义多帧,亦或者选择transition
这种是单纯的css背景渐变,有兴趣的可以尝试一下按钮背景的基础上,伪元素before/after 动画的渐变,很nice!