使用CSS

Question

我需要帮助来制作像线性渐变一样的动画，使用CSS以图像上的透明色结束。

这是一个例子（如果可能）：

Answer 1

通过在:hover上创建线性渐变透明 - 白色透明和向前/向后移动背景来实现当前效果。

这里用于在此动画下放置图像的解决方案。但请记住，无休止的动画可能会让您的用户感到非常分心和烦恼

＆＃13;

＆＃13;

.wrapper {
  position: relative;
  width: 350px;
  height: 150px;
  /*border: 2px solid #444;*/
  border-radius: 10px;
  overflow: hidden;
}

img {
  position: relative;
  z-index: 0;
  width: 100%;
}

.gradient {
  transition: background-position .5s;
  background-size: 200% auto;
  box-shadow: 0 0 20px #eee;
  font: 0;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.gradient {
  background-image: linear-gradient(to top, transparent 0%, white 51%, transparent 100%);
  background-position: center bottom;
}

.gradient:hover {
  background-position: center top;
}

.gradient.animated {
  animation: gradient 2s infinite;
}

@keyframes gradient {
  0% {
    background-position: center bottom;
  }
  50% {
    background-position: center top;
  }
  100% {
    background-position: center bottom;
  }
}

＆＃13;

<div class='wrapper'>
  <div href='#' class='gradient'></div>
  <img src='http://lorempixel.com/350/150/sports/' />
</div>

<div class='wrapper'>
  <div href='#' class='gradient animated'></div>
  <img src='http://lorempixel.com/350/150/sports/' />
</div>

＆＃13;

＆＃13;

＆＃13;

更简单的例子以便更好地理解

您可以在下面的文章中找到更多内容

  

w3schools about CSS3 Gradients

＆＃13;

＆＃13;

.gradiented {
  transition: background-position .5s;
  background-size: 200% auto;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  width: 200px;
  height: 200px; 
}

.gradiented {
  background-image: linear-gradient(to top, #283048 0%, #859398 51%, #283048 100%);
  background-position: center bottom;
}

.gradiented:hover {
  background-position: center top;
}

＆＃13;

<div href='#' class='gradiented'></div>

＆＃13;

＆＃13;

＆＃13;