Question

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

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

我希望能够向此按钮 或任何其他按钮 和

添加一个类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>

对现有按钮的循环渐变效果

1 个答案: