动画背景条纹过渡悬停

如何巧妙运用CSS background-size属性创建炫酷的背景条纹？本文将分享一个案例，演示如何通过CSS渐变、混合模式和background-size属性实现鼠标悬停时背景条纹过渡的视觉效果。

通常，我们使用background-size: cover来让背景图片填充整个元素。但这个案例需要更高级的背景大小控制：鼠标悬停时过渡的背景条纹。效果如下（请将鼠标悬停在以下区域）：

(此处应插入动态效果演示，与原文效果一致)

实现该效果的关键在于巧妙运用渐变和混合模式。让我们从一个简单的HTML结构开始：

<div></div>

初始CSS样式：

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

创建背景条纹

我们可以使用CSS线性渐变来创建条纹。由于条纹宽度不均且需要过渡效果，我们不能直接使用重复渐变。这里，我们通过叠加五个线性渐变背景来模拟五条条纹，并将它们定位到容器的右上角：

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

为了简化代码，我们可以使用自定义属性：

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

--gt表示渐变，--n控制条纹的垂直偏移量。目前线性渐变设置为纯黑色，这是为了后续的遮罩和混合效果。为了防止背景重复平铺，我们需要设置background-repeat: no-repeat;：

div {
  /* ... */
  background-repeat: no-repeat;
}

调整条纹大小和间距

目前条纹重叠在一起，几乎看不出来。我们需要使用background-size属性来设置条纹的宽度和高度。background-size属性支持双值语法，我们可以分别设置宽度和高度。以下代码设置了每个条纹的宽度，高度使用默认值auto：

div {
  /* ... */
  background-size: 60%, 90%, 70%, 40%, 10%;
}

由于高度为auto，条纹会相互覆盖。我们需要使用双值语法，并设置相同的高度：

div {
  /* ... */
  background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n);
}

为了在条纹之间添加间距，我们可以稍微减小每个条纹的高度：

div {
  --h: calc(var(--n) - 5px);
  /* ... */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

遮罩和混合模式

将背景色改为白色：

div {
  /* ... */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* ... */
}

为了实现遮罩和混合效果，我们将<div>包裹在一个父容器中，并添加一个新的<code><div>： <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><section> &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; </section></pre><div class="contentsignin">登录后复制</div></div> <p>使用CSS Grid布局：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">section { display: grid; align-items: center; justify-items: center; width: 500px; height: 500px; } section &gt; div { width: inherit; height: inherit; grid-area: 1 / 1; }</pre><div class="contentsignin">登录后复制</div></div> <p>在第一个<code><div>上应用渐变色，第二个<code><div>应用之前的条纹样式，并使用<code>mix-blend-mode: screen;实现屏幕混合模式：

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  /* ... previous styles ... */
  mix-blend-mode: screen;
}

鼠标悬停效果

最后，我们添加鼠标悬停效果，使条纹宽度扩展到容器的全部宽度：

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
  transition: background-size 1s;
}

最终效果如开头所示。 请注意，为了更好的用户体验，建议考虑减少运动效果的设置，以满足不同用户的偏好。

这个方法具有良好的可维护性和可定制性，您可以轻松更改条纹的高度、颜色和方向等。

希望这个案例能帮助您更好地理解和运用CSS background-size属性。如果您有其他实现方法，欢迎在评论区分享！