带“宽度”的按钮效果

时间：2016-05-12 21:20:27

标签： css css3 css-animations

我引用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可能出错。请告诉我如何解决它！

1 个答案:

答案 0 :(得分：2)

您必须更改动画background-position的{​​{1}}，相应地更改按钮light

注意

我通过删除供应商前缀（其中一些不是必需的）来简化您的演示，以便更好地阅读

width
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;

}

相关问题
最新问题