css - 带有 "width"的按钮效果

Question

我引用了 this pen创建一个光效按钮，像这样:

button {
  padding: 0.8em 0em;
  width: 350px;
  background: #ff6e00;
  border-radius: 15px;
  border: 0;
  color: #fff;
  font-size: 1.2em;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  cursor: pointer;
  margin: 1em 2em;
  text-transform: uppercase;
}
.light {
  background: -moz-linear-gradient(-45deg, #ff6e00 0%, #ff6e00 40%, #ffffff 50%, #ff6e00 60%, #ff6e00 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff6e00), color-stop(40%, #ff6e00), color-stop(50%, #ffffff), color-stop(60%, #ff6e00), color-stop(100%, #ff6e00));
  background: -webkit-linear-gradient(-45deg, #ff6e00 0%, #ff6e00 40%, #ffffff 50%, #ff6e00 60%, #ff6e00 100%);
  background: -o-linear-gradient(-45deg, #ff6e00 0%, #ff6e00 40%, #ffffff 50%, #ff6e00 60%, #ff6e00 100%);
  background: -ms-linear-gradient(-45deg, #ff6e00 0%, #ff6e00 40%, #ffffff 50%, #ff6e00 60%, #ff6e00 100%);
  background: linear-gradient(135deg, #ff6e00 0%, #ff6e00 40%, #ffffff 50%, #ff6e00 60%, #ff6e00 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff6e00', endColorstr='#ff6e00', GradientType=1);
  background-repeat: no-repeat;
  background-position: 0px;
  background-size: 300%;
}
.light:hover {
  animation: light 1s;
  -webkit-animation: light 1s;
}
@keyframes light {
  0% {
    background-position: -600px;
  }
  100% {
    background-position: 0px;
  }
}
@-webkit-keyframes light {
  0% {
    background-position: -600px;
  }
  100% {
    background-position: 0px;
  }
}
.bounce:hover {
  animation: bounce 1s;
  -webkit-animation: bounce 1s;
}
@keyframes bounce {
  0% {
    border-radius: 15px;
  }
  20% {
    border-radius: 30px;
  }
  60% {
    border-radius: 0px;
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    /* IE 9 */
    -webkit-transform: scale(1.1);
    /* Safari and Chrome */
  }
  90% {
    transform: scale(0.98);
    -ms-transform: scale(0.98);
    /* IE 9 */
    -webkit-transform: scale(0.98);
    /* Safari and Chrome */
  }
  100% {
    border-radius: 15px;
  }
}
@-webkit-keyframes bounce {
  0% {
    border-radius: 15px;
  }
  20% {
    border-radius: 30px;
  }
  60% {
    border-radius: 0px;
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    /* IE 9 */
    -webkit-transform: scale(1.1);
    /* Safari and Chrome */
  }
  90% {
    transform: scale(0.98);
    -ms-transform: scale(0.98);
    /* IE 9 */
    -webkit-transform: scale(0.98);
    /* Safari and Chrome */
  }
  100% {
    border-radius: 15px;
  }
}
.letters {
  white-space: nowrap;
  overflow: hidden;
  transition: letter-spacing 3s;
  -webkit-transition: letter-spacing 3s;
  /* Safari */
  transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
}
.letters:hover {
  letter-spacing: 320px;
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}

<button class="light">
  Hover over me
</button>

但是当我试图改变按钮的width时，效果就出错了。这是 width: 200px; 内的按钮:

button {
  padding: 0.8em 0em;
  width: 200px;
  background: #ff6e00;
  border-radius: 15px;
  border: 0;
  color: #fff;
  font-size: 1.2em;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  cursor: pointer;
  margin: 1em 2em;
  text-transform: uppercase;
}
.light {
  background: -moz-linear-gradient(-45deg, #ff6e00 0%, #ff6e00 40%, #ffffff 50%, #ff6e00 60%, #ff6e00 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff6e00), color-stop(40%, #ff6e00), color-stop(50%, #ffffff), color-stop(60%, #ff6e00), color-stop(100%, #ff6e00));
  background: -webkit-linear-gradient(-45deg, #ff6e00 0%, #ff6e00 40%, #ffffff 50%, #ff6e00 60%, #ff6e00 100%);
  background: -o-linear-gradient(-45deg, #ff6e00 0%, #ff6e00 40%, #ffffff 50%, #ff6e00 60%, #ff6e00 100%);
  background: -ms-linear-gradient(-45deg, #ff6e00 0%, #ff6e00 40%, #ffffff 50%, #ff6e00 60%, #ff6e00 100%);
  background: linear-gradient(135deg, #ff6e00 0%, #ff6e00 40%, #ffffff 50%, #ff6e00 60%, #ff6e00 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff6e00', endColorstr='#ff6e00', GradientType=1);
  background-repeat: no-repeat;
  background-position: 0px;
  background-size: 300%;
}
.light:hover {
  animation: light 1s;
  -webkit-animation: light 1s;
}
@keyframes light {
  0% {
    background-position: -600px;
  }
  100% {
    background-position: 0px;
  }
}
@-webkit-keyframes light {
  0% {
    background-position: -600px;
  }
  100% {
    background-position: 0px;
  }
}
.bounce:hover {
  animation: bounce 1s;
  -webkit-animation: bounce 1s;
}
@keyframes bounce {
  0% {
    border-radius: 15px;
  }
  20% {
    border-radius: 30px;
  }
  60% {
    border-radius: 0px;
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    /* IE 9 */
    -webkit-transform: scale(1.1);
    /* Safari and Chrome */
  }
  90% {
    transform: scale(0.98);
    -ms-transform: scale(0.98);
    /* IE 9 */
    -webkit-transform: scale(0.98);
    /* Safari and Chrome */
  }
  100% {
    border-radius: 15px;
  }
}
@-webkit-keyframes bounce {
  0% {
    border-radius: 15px;
  }
  20% {
    border-radius: 30px;
  }
  60% {
    border-radius: 0px;
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    /* IE 9 */
    -webkit-transform: scale(1.1);
    /* Safari and Chrome */
  }
  90% {
    transform: scale(0.98);
    -ms-transform: scale(0.98);
    /* IE 9 */
    -webkit-transform: scale(0.98);
    /* Safari and Chrome */
  }
  100% {
    border-radius: 15px;
  }
}
.letters {
  white-space: nowrap;
  overflow: hidden;
  transition: letter-spacing 3s;
  -webkit-transition: letter-spacing 3s;
  /* Safari */
  transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
}
.letters:hover {
  letter-spacing: 320px;
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}

<button class="light">
  Hover over me
</button>

按钮 width 可能有问题。请告诉我如何修复它!

Answer 1

你必须根据按钮宽度改变动画light的background-position

注意

为了更好地阅读，我通过删除供应商前缀(其中一些不是必需的)简化了您的演示

button {
  padding: 0.8em 0em;
  width: 200px;
  background: #ff6e00;
  border-radius: 15px;
  border: 0;
  color: #fff;
  font-size: 1.2em;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  cursor: pointer;
  margin: 1em 2em;
  text-transform: uppercase;
}
.light {

  background: linear-gradient(135deg, #ff6e00 0%, #ff6e00 40%, #ffffff 50%, #ff6e00 60%, #ff6e00 100%);
  background-repeat: no-repeat;
  background-position: 0px;
  background-size: 300%;
}
.light:hover {
  animation: light 1s;
}
@keyframes light {
  0% {
    background-position: -400px;
  }
  100% {
    background-position: 0px;
  }
}
@-webkit-keyframes light {
  0% {
    background-position: -400px;
  }
  100% {
    background-position: 0px;
  }
}
.bounce:hover {
  animation: bounce 1s;
}
@keyframes bounce {
  0% {
    border-radius: 15px;
  }
  20% {
    border-radius: 30px;
  }
  60% {
    border-radius: 0px;
    transform: scale(1.1);
  }
  90% {
    transform: scale(0.98);
  }
  100% {
    border-radius: 15px;
  }
}
@-webkit-keyframes bounce {
  0% {
    border-radius: 15px;
  }
  20% {
    border-radius: 30px;
  }
  60% {
    border-radius: 0px;
    transform: scale(1.1);
  }
  90% {
    transform: scale(0.98);
  }
  100% {
    border-radius: 15px;
  }
}
.letters {
  white-space: nowrap;
  overflow: hidden;
  transition: letter-spacing 3s;
  -webkit-transition: letter-spacing 3s;
  /* Safari */
  transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
}
.letters:hover {
  letter-spacing: 320px;
  transition-delay: 0s;

}

<button class="light">
  Hover over me
</button>