时间戳

首页 > 解决方案 > CSS：动画部分线性渐变背景

html - CSS：动画部分线性渐变背景

问题描述

我有一个 div，其中背景划分如下：

div {
  width: 200px;
  height: 50px;
  background: linear-gradient(135deg, gray 0%, gray 70%, blue 70%, blue 85%, red 85%);
}

div:hover {
  animation: animate .5s ease forwards;
}

@keyframes animate {
  0% {
    background: linear-gradient(135deg, gray 0%, gray 70%, blue 70%, blue 85%, red 85%);
  }
  
  100% {
    background: linear-gradient(135deg, gray 0%, gray 50%, blue 50%, blue 75%, red 75%);
  }
}
<div></div>

如您所见，我希望背景中的条纹在悬停时移动（实际上，在休假时移动回来）。我看到了所有建议使用的教程background-size，background-position但是由于我需要实际改变比例，我不知道这就是这里的解决方案。

我希望渐变比例能够平滑地制作动画，而不是像上面片段中那样进行裁剪。

标签： htmlcsslinear-gradients

解决方案

正如您所发现的，您拥有的线性渐变不会动画。

获得类似但平滑效果的一种简单方法是使用可设置动画的比例。

此片段在伪元素上绘制线性渐变并在其上转换比例，将变换原点放在右下角。div 的溢出设置为隐藏。

    div {
      width: 200px;
      height: 50px;
      overflow: hidden;
      position: relative;
    }

    div::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      width: 100%;
      height: 100%;
      transform: scale(1);
      transform-origin: right bottom;
      transition: transform .5s ease;
      background: linear-gradient(135deg, gray 0%, gray 70%, blue 70%, blue 85%, red 85%);
      z-index: -1;
    }

    div:hover::before {
      transform: scale(1.5);
    }
<div>SOME CONTENT</div>

推荐阅读