Question

body {
  background-image: url("http://www.nozeens.com/wp-content/uploads/2014/11/White-Wallpaper-Pattern-Hd-Background-8-HD-Wallpapers.jpg");
}
.button {
  margin-top: 100px;
  position: relative;
  background: -webkit-linear-gradient(left top, #FF6600, #FFCC00);
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 4s;
}
@-webkit-keyframes color-change {
  0% {
    background: -webkit-linear-gradient(left top, #005C66, #008A19);
  }
  25% {
    background: -webkit-linear-gradient(left top, #CC66FF, #990099);
  }
  50% {
    background: -webkit-linear-gradient(left top, #FF8C9E, #FFF2C7);
  }
  75% {
    background: -webkit-linear-gradient(left top, #00A3C7, #00C7B5);
  }
  100% {
    background: -webkit-linear-gradient(left top, #ABFF54, #75FF8A);
  }
}
.button2:hover {
  height: 250px;
  min-width: 200px;
  font-size: 75px;
  font-family: american captain;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transform: rotate(360deg);
  animation: color-change 4s ease infinite;
}

<button class="button button2">Hover Me For Fun</button>

我创建了这个动画按钮，其中包含我刚学会的动画，但我似乎无法位置它我甚至尝试了 margin-top 但它不起作用。起初我认为这是因为位置所以我将其更改为 relative 但它仍然无法正常工作。任何帮助将受到高度赞赏。谢谢： - ）

按钮没有定位

0 个答案: