Question

我正在尝试在已经具有渐变的元素上创建发光动画。

但是我的动画删除了渐变背景...

这就是我所做的：

body {
  background: blue;
}

.mytoast {
  -webkit-animation-name: ShineAnimation;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(.12, .89, .98, .47);
  box-sizing: border-box;
  /*background-color:rgba(0, 0, 0, 0.8);*/
  background-image: linear-gradient(-225deg, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
  border-radius: 100px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  clear: both;
  color: #fff;
  cursor: grab;
  /* display: -webkit-flex;
    display: -ms-flexbox;*/
  /* display: flex;*/
  display: inline-block;
  font-size: 16px;
  font-weight: 300;
  height: auto;
  line-height: 1.5;
  margin-top: 8px;
  max-width: 100%;
  min-height: 48px;
  padding: 16px 24px;
  position: relative;
  top: 0px;
  width: 90%;
  margin: 0;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@-webkit-keyframes ShineAnimation {
  from {
    background-repeat: no-repeat;
    background-image: -webkit-linear-gradient( top left, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.0) 45%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0.0) 57%, rgba(255, 255, 255, 0.0) 100%);
    background-position: -250px -250px;
    background-size: 600px 600px
  }
  to {
    background-repeat: no-repeat;
    background-position: 250px 250px;
  }
}

<div class="mytoast">

</div>

如果运行上面的代码，您将看到光泽动画，但问题是它还将为渐变设置动画，并删除了它，这不是我想要的。

有人可以对此提出建议吗？

Answer 1

您可以在CSS中设置multiple backgrounds（包括渐变）。由于您仅为发光渐变的背景位置设置动画，因此可以将所有定义移至.mytoast，并为每个背景设置定义。

在动画中设置两个背景的背景位置。非动画背景的图片与.mytoast中的定义相同。

注意：除非您要支持真正的旧浏览器，否则不需要-webkit前缀。

body {
  background: blue;
}

.mytoast {
  background: 
    linear-gradient(
      to top left, 
      rgba(255, 255, 255, 0.0) 0%,
      rgba(255, 255, 255, 0.0) 45%,
      rgba(255, 255, 255, 0.5) 48%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0.5) 52%,
      rgba(255, 255, 255, 0.0) 57%,
      rgba(255, 255, 255, 0.0) 100%
    ),
    linear-gradient(-225deg, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
  background-size: 600px 600px, 100% 100%;
  background-position: -250px -250px, center;
  background-repeat: no-repeat;
  animation: ShineAnimation 5s infinite cubic-bezier(.12, .89, .98, .47);
  box-sizing: border-box;
  border-radius: 100px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  clear: both;
  color: #fff;
  cursor: grab;
  display: inline-block;
  font-size: 16px;
  font-weight: 300;
  height: auto;
  line-height: 1.5;
  margin-top: 8px;
  max-width: 100%;
  min-height: 48px;
  padding: 16px 24px;
  position: relative;
  top: 0px;
  width: 90%;
  margin: 0;
}

@keyframes ShineAnimation {
  to {
    background-position: 250px 250px, center;
  }
}

<div class="mytoast">

</div>

Answer 2

我更喜欢在.mytoast之前创建一个块，并从左到右为闪亮的块设置动画。

希望这会有所帮助。

body {
  width: 100%;
  background: blue;
}

.mytoast {
  box-sizing: border-box;
  background-image: linear-gradient(-225deg, #ff3cac 0%, #562b7c 52%, #2b86c5 100%);
  border-radius: 100px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  clear: both;
  color: #fff;
  cursor: -webkit-grab;
  cursor: grab;
  display: block;
  font-size: 16px;
  font-weight: 300;
  height: auto;
  line-height: 1.5;
  width: 100%;
  height: 48px;
  padding: 16px 24px;
  position: relative;
  top: 0px;
  width: 90%;
  margin: 8px 0 0;
  overflow: hidden;
}
.mytoast:before {
  width: 100%;
  height: 48px;
  content: "";
  background-image: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0) 57%, rgba(255, 255, 255, 0) 100%);
  -webkit-animation-name: ShineAnimation;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.12, 0.89, 0.98, 0.47);
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 2;
  -webkit-transform: skew(-20deg);
          transform: skew(-20deg);
}

@-webkit-keyframes ShineAnimation {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}

<div class="mytoast"></div>

发光渐变背景动画？

2 个答案: