尝试在 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>
这是一个更改文本颜色和边框颜色而不是背景的版本。
/* 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>
类名存在类型错误:
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>