如何在按钮轮廓上设置换色动画？

时间：2016-11-17 09:54:56

标签： html css animation

尝试在https://daneden.github.io/animate.css/上重新创建按钮轮廓效果。我试着查看代码并且无法弄清楚是什么触发了什么，所以我从一些教程中创建了一个变色效果，然后从animate.css页面中撕掉了按钮样式的CSS并将它们合并在一起。颜色动画已应用于按钮，但我似乎无法解决的是如何将该颜色动画仅应用于轮廓和内部文本。我也想知道我是如何使颜色变化更加渐进的，因为即使在增加动画持续时间后它仍然感觉太突然。

我的尝试： http://codepen.io/Dingerzat/pen/pNNgZj

＆＃13;
＆＃13; 
 /* CSS */

.modal__button {
  -webkit-animation: hue 60s linear;
  -o-animation: hue 60s linear;
  animation: hue 60s linear;
  background-color: transparent;
  border: 2px solid #f35626;
  color: #f35626;
  cursor: pointer;
  font-size: 15px;
  outline: none;
  padding: 7px 22px;
  -webkit-transition: background-color .4s, color .4s;
  -o-transition: background-color .4s, color .4s;
  transition: background-color .4s, color .4s;
}  
.color {
  animation-name: color_change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@-webkit-keyframes color_change {
  0% { background-color: #da6e16; }
  25% { background-color: #82da16; }
  50% { background-color: #16dad0; }
  75% { background-color: #d41a82; }
  100% { background-color: #d41a82 }
}
@-moz-keyframes color_change {
  0% { background-color: #da6e16; }
  25% { background-color: #82da16; }
  50% { background-color: #16dad0; }
  75% { background-color: #d41a82; }
  100% { background-color: #d41a82 }
}
@-ms-keyframes color_change {
  0% { background-color: #da6e16; }
  25% { background-color: #82da16; }
  50% { background-color: #16dad0; }
  75% { background-color: #d41a82; }
  100% { background-color: #d41a82 }
}
@-o-keyframes color_change {
  0% { background-color: #da6e16; }
  25% { background-color: #82da16; }
  50% { background-color: #16dad0; }
  75% { background-color: #d41a82; }
  100% { background-color: #d41a82 }
}
@keyframes color_change {
  0% { background-color: #da6e16; }
  25% { background-color: #82da16; }
  50% { background-color: #16dad0; }
  75% { background-color: #d41a82; }
  100% { background-color: #d41a82 }
}
＆＃13; 
<!-- HTML -->
<button class="modal_button color">ddd</button>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

班级名称中存在类型错误：modal_button

在Css中：modal__button

只需更改它就可以了。

 /* CSS */

.modal__button {
  -webkit-animation: hue 60s linear;
  -o-animation: hue 60s linear;
  animation: hue 60s linear;
  background-color: transparent;
  border: 2px solid #f35626;
  color: #f35626;
  cursor: pointer;
  font-size: 15px;
  outline: none;
  padding: 7px 22px;
  -webkit-transition: background-color .4s, color .4s;
  -o-transition: background-color .4s, color .4s;
  transition: background-color .4s, color .4s;
}  
.color {
  animation-name: color_change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@-webkit-keyframes color_change {
  0% { background-color: #da6e16; }
  25% { background-color: #82da16; }
  50% { background-color: #16dad0; }
  75% { background-color: #d41a82; }
  100% { background-color: #d41a82 }
}
@-moz-keyframes color_change {
  0% { background-color: #da6e16; }
  25% { background-color: #82da16; }
  50% { background-color: #16dad0; }
  75% { background-color: #d41a82; }
  100% { background-color: #d41a82 }
}
@-ms-keyframes color_change {
  0% { background-color: #da6e16; }
  25% { background-color: #82da16; }
  50% { background-color: #16dad0; }
  75% { background-color: #d41a82; }
  100% { background-color: #d41a82 }
}
@-o-keyframes color_change {
  0% { background-color: #da6e16; }
  25% { background-color: #82da16; }
  50% { background-color: #16dad0; }
  75% { background-color: #d41a82; }
  100% { background-color: #d41a82 }
}
@keyframes color_change {
  0% { background-color: #da6e16; }
  25% { background-color: #82da16; }
  50% { background-color: #16dad0; }
  75% { background-color: #d41a82; }
  100% { background-color: #d41a82 }
}
<!-- HTML -->
<button class="modal__button color">ddd</button>

对于更改文字颜色和按钮边框：

.modal__button {
  -webkit-animation: hue 60s linear;
  -o-animation: hue 60s linear;
  animation: hue 60s linear;
  background-color: transparent;
  border: 2px solid #f35626;
  color: #f35626;
  cursor: pointer;
  font-size: 15px;
  outline: none;
  padding: 7px 22px;
  -webkit-transition: background-color .4s, color .4s;
  -o-transition: background-color .4s, color .4s;
  transition: background-color .4s, color .4s;
}  
.color {
  animation-name: color_change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@-webkit-keyframes color_change {
  0% {color: #da6e16; border-color: #da6e16; }
  25% { color: #82da16; border-color: #82da16; }
  50% {color: #16dad0; border-color: #16dad0; }
  75% {color: #d41a82; border-color: #d41a82; }
  100% {color: #d41a82  border-color: #d41a82;}
}
@-moz-keyframes color_change {
 0% { color: #da6e16; border-color: #da6e16;}
  25% { color: #82da16; border-color: #82da16;}
  50% { color: #16dad0; border-color: #16dad0;}
  75% { color: #d41a82; border-color: #d41a82;}
  100% { color: #d41a82 border-color: #d41a82;}
}
@-ms-keyframes color_change {
  0% { color: #da6e16; border-color: #da6e16;}
  25% { color: #82da16; border-color: #82da16;}
  50% { color: #16dad0; border-color: #16dad0;}
  75% { color: #d41a82; border-color: #d41a82;}
  100% { color: #d41a82 border-color: #d41a82;}
}
@-o-keyframes color_change {
  0% { color: #da6e16; border-color: #da6e16;}
  25% { color: #82da16; border-color: #82da16;}
  50% { color: #16dad0; border-color: #16dad0;}
  75% { color: #d41a82; border-color: #d41a82;}
  100% { color: #d41a82 border-color: #d41a82;}
}
@keyframes color_change {
  0% { color: #da6e16; border-color: #da6e16;}
  25% { color: #82da16; border-color: #82da16;}
  50% { color: #16dad0; border-color: #16dad0;}
  75% { color: #d41a82; border-color: #d41a82;}
  100% { color: #d41a82 border-color: #d41a82;}
}
<button class="modal__button color">Button Text</button>

答案 1 :(得分：1)

这是一个更改文字颜色和边框颜色的版本，而不是背景。

＆＃13;
＆＃13; 
/* CSS */
.modal_button {
  min-height: 2em;
  width: 5em;
  background-color: white;
  border: 2px solid #f35626;
  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;
}  
.color {
  animation-name: color_change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@-webkit-keyframes color_change {
  0% { color: #da6e16; border: 2px solid #da6e16; }
  25% { color: #82da16; border: 2px solid #82da16; }
  50% { color: #16dad0; border: 2px solid #16dad0; }
  75% { color: #d41a82; border: 2px solid #d41a82; }
  100% { color: #d41a82; border: 2px solid #d41a82; }
}
@-moz-keyframes color_change {
  0% { color: #da6e16; border: 2px solid #da6e16; }
  25% { color: #82da16; border: 2px solid #82da16; }
  50% { color: #16dad0; border: 2px solid #16dad0; }
  75% { color: #d41a82; border: 2px solid #d41a82; }
  100% { color: #d41a82; border: 2px solid #d41a82; }
}
@-ms-keyframes color_change {
  0% { color: #da6e16; border: 2px solid #da6e16; }
  25% { color: #82da16; border: 2px solid #82da16; }
  50% { color: #16dad0; border: 2px solid #16dad0; }
  75% { color: #d41a82; border: 2px solid #d41a82; }
  100% { color: #d41a82; border: 2px solid #d41a82; }
}
@-o-keyframes color_change {
  0% { color: #da6e16; border: 2px solid #da6e16; }
  25% { color: #82da16; border: 2px solid #82da16; }
  50% { color: #16dad0; border: 2px solid #16dad0; }
  75% { color: #d41a82; border: 2px solid #d41a82; }
  100% { color: #d41a82; border: 2px solid #d41a82; }
}
@keyframes color_change {
  0% { color: #da6e16; border: 2px solid #da6e16; }
  25% { color: #82da16; border: 2px solid #82da16; }
  50% { color: #16dad0; border: 2px solid #16dad0; }
  75% { color: #d41a82; border: 2px solid #d41a82; }
  100% { color: #d41a82; border: 2px solid #d41a82; }
}
＆＃13; 
<button class="modal_button color">Button</button>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题