优衣库条纹悬停效果

在 Uniqlo.com 的设计中，较大的促销框使用了在悬停时显示的动画条纹。如果你问我，这效果相当酷。也许是为了尽可能多地与不同的浏览器共享这种酷炫效果，他们使用了 动画GIF 来实现。它的大小只有4K，但正如我们所知，它也是另一个HTTP请求。让我们以渐进增强的方式重现这种效果：减少浏览器兼容性要求，提高效率。

HTML 代码

我们可以只使用父元素来实现这一点，在:hover状态下将其背景更改为动画条纹。但是，优衣库上的条纹会淡入，而不是直接出现。不幸的是，我们没有可以使用的background-opacity属性来帮助我们实现过渡效果。

我们可以使用 ::before 伪元素，并使用不透明度来淡入淡出整个元素，但是 对伪元素过渡效果的支持才刚刚开始变得良好。

就这一次，让我们使用一个额外的元素来处理我们的特殊背景

<div class="product">
  <div class="product-hover"></div>

  <!-- all the product information and stuff -->
</div>

CSS 代码

.product 类将具有一些内边距，这实际上会显示出动画条纹将出现的粗大的白色边框。

.product {
  background: white;
  padding: 20px;
  position: relative;
}

然后，如果我们将.product-hover绝对定位到每个角，它的背景就会显示在产品周围的 20px padding 中。默认情况下，我们将opacity设置为 0，使其不可见。

.product-hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

条纹

现在，要创建那个“旋转灯柱”动画条纹，我们需要使用 45 度线性渐变来创建一个可重复的正方形，最终看起来像条纹。以下是相关的代码。

.product-hover {
  background-size: 30px 30px;
  background-image: linear-gradient(
    45deg, 
    rgba(black, 0.1)  25%, 
    transparent       25%, 
    transparent       50%, 
    rgba(black, 0.1)  50%, 
    rgba(black, 0.1)  75%, 
    transparent       75%, 
    transparent
  );  
}

在 Lea Verou 的图案库中也有一些 对角线条纹。代码也更简洁一些，但不要允许背景为白色或透明。

以下是渐变的工作原理

除了 RGBa 值中的“黑色”之外，所有这些都是标准的 CSS，这可以通过 Sass 实现。

那个 30px ✕ 30px 的块是完全可重复的，并将用条纹填充.product-hover。

显示条纹

它本身就是一个元素，所以非常容易

.product:hover .product-hover {
  opacity: 1;
}

但这是一种瞬间显示的效果。为了实现淡入淡出的效果，我们设置了一个 CSS3 过渡。

.product-hover {
  transition: opacity 0.3s ease;
}

动画条纹

这里我们需要使用 动画（而不是过渡），因为我们希望条纹无限循环动画。

在.product-hover上移动背景位置将改变我们的小 30px ✕ 30px 方块的起始位置，从而使其看起来像旋转灯柱一样移动。

@keyframes barberpole {
  from { background-position: 0 0; }
  to   { background-position: 60px 30px; }
}

然后，我们为元素设置该动画，使其以线性方式（无缓动）无限循环。

.product-hover {
  animation: barberpole 0.5s linear infinite;
}

演示

搞定！演示 在 CodePen 上查看

Check out this Pen!