现有按钮的循环渐变效果

Question

我有一个已经存在的按钮 :

<div class="button-loader locationButton brandBlue fontMediumTitle " id="locationButton"></div>

我希望能够将 class button-loader 添加到此按钮 或任何其他按钮，以及

保持当前背景颜色
在循环中从左到右 并返回 - 所以我从原始颜色开始并更改其 opacity 从左到右再回到原来的状态。（假设从左到右不透明度变为 0.5，从右回到 1.0）

.button-loader {     
   width: 100%;
   height: 100%;
   display: block;

   background: linear-gradient(to right, rgba(245, 245, 245, 0.95), rgba(255, 255, 255, 0.0));
   background-size: 200% 100%;
   background-position: right bottom;
   transition: all 1.5s ease-out;
 }

 .button-loader:hover {
   background-position: left bottom;
 }

当前代码不会永远循环并且不会保持动画开始前的原始颜色（它已经渐变）

Answer 1

考虑在伪元素上使用渐变，而不是在其中轻松保留初始背景颜色：

.button-loader {
  width: 100px;
  height: 100px;
  border:1px solid;
  background-size: 200% 100%;
  transition: all 1.5s ease-out;
  position:relative;
  z-index:0;
}
.button-loader:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background: linear-gradient(to right,rgba(255, 255, 255, 0.0), rgba(245, 245, 245, 0.95) 40% 60%, rgba(255, 255, 255, 0.0));
  background-size:600% 100%;
  background-position:right;
  transition:1s all;
}

.button-loader:hover:before {
  background-position:left;
}

<div class="button-loader" style="background:blue;"></div>
<div class="button-loader" style="background:red;"></div>

<div class="button-loader" style="background:linear-gradient(red,purple);"></div>

对于无限动画，可以用动画代替过渡：

.button-loader {
  width: 100px;
  height: 100px;
  border:1px solid;
  background-size: 200% 100%;
  transition: all 1.5s ease-out;
  position:relative;
  z-index:0;
}
.button-loader:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background: linear-gradient(to right,rgba(255, 255, 255, 0.0), rgba(245, 245, 245, 0.95) 45% 55%, rgba(255, 255, 255, 0.0));
  background-size:600% 100%;
  background-position:right;
  animation:change 1s infinite linear;
}

@keyframes change {
to {
  background-position:left;
}
}

<div class="button-loader" style="background:blue;"></div>
<div class="button-loader" style="background:red;"></div>
<div class="button-loader" style="background:linear-gradient(red,purple);"></div>

您还可以为翻译设置动画以获得更好的性能：

.button-loader {
  width: 100px;
  height: 100px;
  border:1px solid;
  background-size: 200% 100%;
  transition: all 1.5s ease-out;
  position:relative;
  z-index:0;
  overflow:hidden;
}
.button-loader:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  width:600%;
  bottom:0;
  background: linear-gradient(to right,rgba(255, 255, 255, 0.0), rgba(245, 245, 245, 0.95) 45% 55%, rgba(255, 255, 255, 0.0));
  animation:change 1s infinite linear;
}

@keyframes change {
to {
  transform:translate(84%);
}
}

<div class="button-loader" style="background:blue;"></div>
<div class="button-loader" style="background:red;"></div>
<div class="button-loader" style="background:linear-gradient(red,purple);"></div>

现有按钮的循环渐变效果

Loop gradient effect on existing button

css

linear-gradients