使用关键帧动画使文本在不同的屏幕尺寸下改变颜色。

Question

我正在尝试使

标签的文本在不同屏幕大小上改变文字颜色，因为我的网页有一张图片，使得文字不可读。

我使用了@media和@keyframe CSS动画来实现这个目标，但它没有起作用，也许我漏掉了一些东西。

HTML:

<div class="container-fuid section section-contact" id="contact">
    <div class="row text-center">
            <h1>Contact Us</h1>
                <h3>
                    Looking for a quo<span class="span1">te for your next</span> <spanclass="span2">project?</span>
                </h3>
                  <address>
                    <strong><i class="icon-phone"></i> PHONE NUMBER:</strong><br>
                       <span>0000000000000</span><br>
                    <strong><i class="icon-envelope"></i> EMAIL:</strong<br>
                     <strong> <a href="mailto:[e-mail]">[e-mail]</a></strong>
              </address>
      </div>
</div> 

CSS:

.section.section-contact{
    width:100%;
    height: 70%;
    background-color: #fe523e;
    margin: 0;
    background-size: 100% auto;
    background-image:url('../img/contact-right.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: 70.05%;

}

@media all and (min-width: 320px) and (max-width: 900px) {
.section.section-contact{
    background-size: 100%;

  }
}
.section.section-contact div {
    font-weight: 100;
    font-size: 20px;
}

.section.section-contact h1{
    font-weight: 900;
    font-size: 3em;
    color: #083858;
    text-transform: uppercase;
    padding-top: 30px;
}

.section.section-contact h3{
    font-weight: 400;
    font-size: 30px;
    color: #083858;
    text-transform: uppercase;
    padding-top: 20px;
    white-space: nowrap;
    text-align: center;

}

/** make text color change at different screen size BEGIN */

.section.section-contact .span2{
    animation-name: span2; 
    animation-duration: 5s;
    animation-iteration-count:infinite;
}

@media (max-width: 1356px) {
    .section.section-contact .span2{
    @keyframes span2 {
          from {background-color: whitesmoke}
          to {background-color: #083858;}
        }
    }
}
.section.section-contact .span1{
    animation-name: span1; 
    animation-duration: 5s;
    animation-iteration-count:infinite;
}

@media (min-width: 1200px) {
     .section.section-contact .span1{
    @keyframes span1 {
          from {background-color: #083858;}
          to {background-color: whitesmoke;}
        }
    }
}
/** make text color change at different screen size  END*/

任何帮助都将不胜感激。

- emekaokoli

Answer 1

css: 你没有指定浏览器前缀，例如 -webkit-, -moz-, -ms- 找到 fiddle演示

.section.section-contact{
    width:100%;
    height: 70%;
    background-color: #fe523e;
    margin: 0;
    background-size: 100% auto;
    background-image:url('../img/contact-right.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: 70.05%;

}

@media all and (min-width: 320px) and (max-width: 900px) {
.section.section-contact{
    background-size: 100%;

  }
}
.section.section-contact div {
    font-weight: 100;
    font-size: 20px;
}

.section.section-contact h1{
    font-weight: 900;
    font-size: 3em;
    color: #083858;
    text-transform: uppercase;
    padding-top: 30px;
}

.section.section-contact h3{
    font-weight: 400;
    font-size: 30px;
    color: #083858;
    text-transform: uppercase;
    padding-top: 20px;
    white-space: nowrap;
    text-align: center;

}

/** make text color change at different screen size BEGIN */

.section.section-contact .span2{
    -webkit-animation: span2 5s infinite;
    -moz-animation: span2 5s infinite; 
    -ms-animation: span2 5s infinite; 
    animation: span2 5s infinite;
}

@media (max-width: 1356px) {
        @-webkit-keyframes span2 {
          from {background-color: whitesmoke}
          to {background-color: #083858;}
        }
        @-moz-keyframes span2 {
          from {background-color: whitesmoke}
          to {background-color: #083858;}
        }
        @-ms-keyframes span2 {
          from {background-color: whitesmoke}
          to {background-color: #083858;}
        }
        @keyframes span2 {
          from {background-color: whitesmoke}
          to {background-color: #083858;}
        }
}
.section.section-contact .span1{
    -webkit-animation: span1 5s infinite;
    -moz-animation: span1 5s infinite; 
    -ms-animation: span1 5s infinite; 
    animation: span1 5s infinite;
}

@media (min-width: 1200px) {

     @-webkit-keyframes span1 {
          from {background-color: #083858;}
          to {background-color: whitesmoke;}
        }
     @-moz-keyframes span1 {
          from {background-color: #083858;}
          to {background-color: whitesmoke;}
        }
     @-ms-keyframes span1 {
          from {background-color: #083858;}
          to {background-color: whitesmoke;}
        }
     @keyframes span1 {
          from {background-color: #083858;}
          to {background-color: whitesmoke;}
        }
}
/** make text color change at different screen size  END*/

- Ganesh Yadav

---

为供应商前缀加1 - Web pundit

你确定你没有给任何人解决方案（绿色标记）吗？ - Ganesh Yadav

@locateganesh 有没有办法只改变文本颜色而不闪烁？ - emekaokoli

请使用百分比的关键帧而不是“from”和“to”，参见 https://jsfiddle.net/jspowqqh/1/。 - Ganesh Yadav

Answer 2

将你的keyframes移出media查询，然后将你的animation-name、iteration-count等代码复制到media查询内。

@keyframes span2 {
          from {background-color: whitesmoke}
          to {background-color: #083858;}
        }

@media (max-width: 1356px) {
.section.section-contact .span2{
    animation-name: span2; 
    animation-duration: 5s;
    animation-iteration-count:infinite;
}
}
    @keyframes span1 {
          from {background-color: #083858;}
          to {background-color: whitesmoke;}
        }

@media (min-width: 1200px) {
.section.section-contact .span1{
    animation-name: span1; 
    animation-duration: 5s;
    animation-iteration-count:infinite;
}
}

工作示例 - 你会看到我在媒体查询中将width减小到300px和600px，以便您可以轻松地查看是否发生了变化。

- Rohit Kumar

---

谢谢，它起作用了。有没有办法只更改文本颜色而不闪烁？ - emekaokoli

@codecraft 要更改 text-color 而不是 background-color 吗？那么在 keyframes 中使用 color:＃083858; 代替 background-color，同时为了实现背景色的瞬间闪烁，您应该在 keyframes 中使用以下代码 - 0％，100％ {color：whitesmoke;} 50％ {color：＃083858;}，删除原始的 from 和 to。 - Rohit Kumar

我已经做到了，但是我想要的只是在屏幕缩小时改变文本颜色，而不会出现任何闪烁。 - emekaokoli

@codecraft 完成了什么？文本着色吗？我认为你的意思是不要有那种即时闪烁的动画，而是从白烟色平滑地淡入到 #083858，然后再从 #083858 平滑地淡出到白烟色... 你想让这种平滑渐变无限次重复吗？ - Rohit Kumar

@codecraft 你想要这个 - http://jsfiddle.net/k5ert5pb/1/ 还是这个 - http://jsfiddle.net/k5ert5pb/2/？ - Rohit Kumar

Answer 3

尝试以下代码。在包含关键帧的媒体查询中，您无需再次调用选择器，因为您已经通过“animation-name”属性指向了相关的关键帧。

.section.section-contact .span2{
    animation-name: span2; 
    animation-duration: 5s;
    animation-iteration-count:infinite;
}

@media (max-width: 1356px) {
    @keyframes span2 {
          from {background-color: whitesmoke}
          to {background-color: #083858;}
    }
}
.section.section-contact .span1{
    animation-name: span1; 
    animation-duration: 5s;
    animation-iteration-count:infinite;
}

@media (min-width: 1200px) {
    @keyframes span1 {
          from {background-color: #083858;}
          to {background-color: whitesmoke;}
    }
}

- Web pundit