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

Question

我试图让 div 的文本在屏幕尺寸不同时更改文本 color，因为我的网页有一张图片，使文本不可读。

我已经使用 @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:hello@me.com">hello@me.com</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*/

如有任何帮助，我们将不胜感激。

Answer 1

将您的 keyframes 移到 media 查询之外，然后将您的动画名称、迭代次数等代码复制到 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;
}
}

Working fiddle - 你会看到我已经将媒体查询中的 width 减少到 300px 和 600px 以便你可以轻松查看正在发生的变化与否。

Answer 2

试试下面的方法。您不必在包含关键帧的媒体查询中再次调用选择器，因为您已经使用 "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;}
    }
}

Answer 3

css：您没有指定浏览器前缀，例如。 -webkit-、-moz-、-ms- 找到 fiddle demo

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

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

make text change color at different screen size with animation using keyframes

html

css

keyframe

css-animations