时间戳

首页 > 解决方案 > 现有按钮上的循环渐变效果

css - 现有按钮上的循环渐变效果

问题描述

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

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

我希望能够button-loader向这个按钮或任何其他按钮添加一个类，并且

  1. 保持当前的背景颜色
  2. 在一个循环中从左到右再返回动画- 所以我从原始颜色开始并从左到右更改它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;
 }

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

标签： csslinear-gradients

解决方案

考虑伪元素上的渐变，而不是您可以轻松保留初始背景颜色的地方：

.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>

推荐阅读