如何在按钮轮廓上有变色动画？

问题描述 投票：0回答：3

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

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

 /* 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>

html css animation
3个回答
1
投票

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

/* 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; }
}
<button class="modal_button color">Button</button>

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>

0
投票

我喜欢我的..奶酪滴布鲁赫

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.