Question

我的按钮有一个换色的CSS动画。当我徘徊时，我决定让它变得坚固。尽管代码有效并且颜色仍然会发生变化，但每次将鼠标悬停在动画上时动画都会重置。有没有办法让悬停状态的颜色动画与动作之前的非悬停状态的颜色相同（因此当非悬停为绿色时，悬停时它仍然是绿色）。

http://codepen.io/Dingerzat/pen/mRdObJ

＆＃13;

/* CSS */

.enquire_button {
  min-height: 2em;
  width: 7em;
  background-color: white;
  border: 4px solid #f35626;
  border-radius: 5px;
  color: #f35626;
  cursor: pointer;
  font-size: 2em;
  line-height: 2em;
  -webkit-transition: color .4s;
  -o-transition: color .4s;
  transition: color .4s;
  -webkit-animation: hue 60s linear;
  -o-animation: hue 60s linear;
  animation: hue 60s linear;
  text-align: center;
}
.enquire_button:hover {
  background-color: #f35626;
  color: #ffffff;
  -webkit-transition: color .4s;
  -o-transition: color .4s;
  transition: color .4s;
  -webkit-animation: hue 60s linear;
  -o-animation: hue 60s linear;
  animation: hue 60s linear;
}
.color_button {
  animation-name: color_change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.color_button:hover {
  animation-name: color_change2;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@-webkit-keyframes color_change {
  0% {
    color: #da6e16;
    border: 4px solid #da6e16;
  }
  25% {
    color: #82da16;
    border: 4px solid #82da16;
  }
  50% {
    color: #16dad0;
    border: 4px solid #16dad0;
  }
  75% {
    color: #d41a82;
    border: 4px solid #d41a82;
  }
  100% {
    color: #d41a82;
    border: 4px solid #d41a82;
  }
}
@-moz-keyframes color_change {
  0% {
    color: #da6e16;
    border: 4px solid #da6e16;
  }
  25% {
    color: #82da16;
    border: 4px solid #82da16;
  }
  50% {
    color: #16dad0;
    border: 4px solid #16dad0;
  }
  75% {
    color: #d41a82;
    border: 4px solid #d41a82;
  }
  100% {
    color: #d41a82;
    border: 4px solid #d41a82;
  }
}
@-ms-keyframes color_change {
  0% {
    color: #da6e16;
    border: 4px solid #da6e16;
  }
  25% {
    color: #82da16;
    border: 4px solid #82da16;
  }
  50% {
    color: #16dad0;
    border: 4px solid #16dad0;
  }
  75% {
    color: #d41a82;
    border: 4px solid #d41a82;
  }
  100% {
    color: #d41a82;
    border: 4px solid #d41a82;
  }
}
@-o-keyframes color_change {
  0% {
    color: #da6e16;
    border: 4px solid #da6e16;
  }
  25% {
    color: #82da16;
    border: 4px solid #82da16;
  }
  50% {
    color: #16dad0;
    border: 4px solid #16dad0;
  }
  75% {
    color: #d41a82;
    border: 4px solid #d41a82;
  }
  100% {
    color: #d41a82;
    border: 4px solid #d41a82;
  }
}
@keyframes color_change {
  0% {
    color: #da6e16;
    border: 4px solid #da6e16;
  }
  25% {
    color: #82da16;
    border: 4px solid #82da16;
  }
  50% {
    color: #16dad0;
    border: 4px solid #16dad0;
  }
  75% {
    color: #d41a82;
    border: 4px solid #d41a82;
  }
  100% {
    color: #d41a82;
    border: 4px solid #d41a82;
  }
}
@-webkit-keyframes color_change2 {
  0% {
    color: #ffffff;
    background-color: #da6e16;
    border: 4px solid #da6e16;
  }
  25% {
    color: #ffffff;
    background-color: #82da16;
    border: 4px solid #82da16;
  }
  50% {
    color: #ffffff;
    background-color: #16dad0;
    border: 4px solid #16dad0;
  }
  75% {
    color: #ffffff;
    background-color: #d41a82;
    border: 4px solid #d41a82;
  }
  100% {
    color: #ffffff;
    background-color: #d41a82;
    border: 4px solid #d41a82;
  }
}
@-moz-keyframes color_change2 {
  0% {
    color: #ffffff;
    background-color: #da6e16;
    border: 4px solid #da6e16;
  }
  25% {
    color: #ffffff;
    background-color: #82da16;
    border: 4px solid #82da16;
  }
  50% {
    color: #ffffff;
    background-color: #16dad0;
    border: 4px solid #16dad0;
  }
  75% {
    color: #ffffff;
    background-color: #d41a82;
    border: 4px solid #d41a82;
  }
  100% {
    color: #ffffff;
    background-color: #d41a82;
    border: 4px solid #d41a82;
  }
}
@-ms-keyframes color_change2 {
  0% {
    color: #ffffff;
    background-color: #da6e16;
    border: 4px solid #da6e16;
  }
  25% {
    color: #ffffff;
    background-color: #82da16;
    border: 4px solid #82da16;
  }
  50% {
    color: #ffffff;
    background-color: #16dad0;
    border: 4px solid #16dad0;
  }
  75% {
    color: #ffffff;
    background-color: #d41a82;
    border: 4px solid #d41a82;
  }
  100% {
    color: #ffffff;
    background-color: #d41a82;
    border: 4px solid #d41a82;
  }
}
@-o-keyframes color_change2 {
  0% {
    color: #ffffff;
    background-color: #da6e16;
    border: 4px solid #da6e16;
  }
  25% {
    color: #ffffff;
    background-color: #82da16;
    border: 4px solid #82da16;
  }
  50% {
    color: #ffffff;
    background-color: #16dad0;
    border: 4px solid #16dad0;
  }
  75% {
    color: #ffffff;
    background-color: #d41a82;
    border: 4px solid #d41a82;
  }
  100% {
    color: #ffffff;
    background-color: #d41a82;
    border: 4px solid #d41a82;
  }
}
@keyframes color_change2 {
  0% {
    color: #ffffff;
    background-color: #da6e16;
    border: 4px solid #da6e16;
  }
  25% {
    color: #ffffff;
    background-color: #82da16;
    border: 4px solid #82da16;
  }
  50% {
    color: #ffffff;
    background-color: #16dad0;
    border: 4px solid #16dad0;
  }
  75% {
    color: #ffffff;
    background-color: #d41a82;
    border: 4px solid #d41a82;
  }
  100% {
    color: #ffffff;
    background-color: #d41a82;
    border: 4px solid #d41a82;
  }
}

＆＃13;

<button class="enquire_button color_button">Click here</button>

＆＃13;

Answer 1

我认为这是你想要实现的目标，但它需要额外的标记。我试图尽可能保持你的代码完整，但为了这个例子已经删除了它。 codepen中附加完整必填代码。

HTML

<button class="enquire_button color_button">
  <span class="button_text">Click here</span>
</button>

CSS

.enquire_button {
  animation-direction: alternate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-name: color_change;
  background-color: #fff;
  border: 4px solid #f35626;
  border-radius: 5px;
  color: #f35626;
  cursor: pointer;
  font-size: 2em;
  line-height: 2em;
  min-height: 2em;
  position: relative;
  text-align: center;
  transition: color .4s;
  width: 7em;  
}

.enquire_button:before {
  background: #fff;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: background-color .4s;
  width: 100%;
}

.enquire_button:hover .button_text {
  color: #fff;
}

.enquire_button:hover:before {
  background-color: transparent;
}

.button_text {
  position: relative;
}

@keyframes color_change {
  0% {
    background-color: #da6e16;
    color: #da6e16;
    border: 4px solid #da6e16;
  }
  25% {
    background-color: #82da16;
    color: #82da16;
    border: 4px solid #82da16;
  }
  50% {
    background-color: #16dad0;
    color: #16dad0;
    border: 4px solid #16dad0;
  }
  75% {
    background-color: #d41a82;
    color: #d41a82;
    border: 4px solid #d41a82;
  }
  100% {
    background-color: #d41a82;
    color: #d41a82;
    border: 4px solid #d41a82;
  }
}

Answer 2

我认为通过双按钮可以做什么））

<div class="btn">
    <button>Button #1</button>
    <button>Button #2</button>
</div>

按钮＃1 - 动画无限。

按钮＃2 - 白色背景

.bnt button + button {
    display: none;
}

Answer 3

使用 tcp_client = socket.socket(socket.AF_INET, socket.SOCK_STREAM) . . . tcp_client.sendall(bytes(data)) 伪元素

:after

/* Color changing button */

.enquire_button {
  min-height: 2em;
  width: 7em;
  background-color: white;
  border: 4px solid;
  border-radius: 5px;
  cursor: pointer;
  font-size: 2em;
  line-height: 2em;
  text-align: center;
}

.color_button {
  animation: color_change 10s infinite alternate;
}
.color_button:after {
  display: inline-block;
  font-size: 1em;
  content: "Click here";
}
.color_button:hover {
  background-color: currentcolor;
}
.color_button:hover:after {
  color: #fff;
}

@keyframes color_change {
  0% { color: #da6e16; }
  25% { color: #82da16; }
  50% { color: #16dad0; }
  75% { color: #d41a82; }
  100% { color: #d41a82; }
}

使用 <button class="enquire_button color_button"></button> CSS 过滤器

hue-rotate

/* Color changing button */

.enquire_button {
  min-height: 2em;
  width: 7em;
  background-color: white;
  border: 4px solid;
  border-radius: 5px;
  cursor: pointer;
  font-size: 2em;
  line-height: 2em;
  text-align: center;
}

.color_button {
  color: #da6e16;
  animation: color_change 10s infinite alternate;
}
.color_button:hover {
  color: #fff;
  background-color: #da6e16;
  border-color: #da6e16;
}

@keyframes color_change {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

同步CSS动画

3 个答案: