[英]make text change color at different screen size with animation using keyframes
I am trying to make text of the div
change text color
when it gets to different screen size because my webpage has a picture viz making the text not readable. 我试图制作
div
更改文本color
文本,因为我的网页有一个图片即使文字不可读。
I've used @media
and @keyframe
CSS
animation to achieve that but it doesn't work, maybe there's something I'm missing. 我已经使用了
@media
和@keyframe
CSS
动画来实现这一点,但它不起作用,也许有些东西我不知道了。
HTML
: 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
: 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*/
Any help would be much appreciated. 任何帮助将非常感激。
css: you did not specify browser prefix eg. css:你没有指定浏览器前缀,例如。 -webkit-, -moz-, -ms- find fiddle demo
-webkit-,-moz-,-ms-查找小提琴演示
.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*/
move your keyframes
outside the media
query, and then copy your animation-name, iteration-count, etc codes inside the media
query 移动你的
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 - you will see I've decreased the width
to 300px
and 600px
in the media queries so that you can easily view the change is happening or not. 工作小提琴 - 您将看到我在媒体查询中将
width
减小到300px
和600px
,这样您就可以轻松查看更改是否正在发生。
Try the below. 试试下面的内容。 You don't have to call the selectors again inside the media query wrapping the keyframes as you are already pointing to the relevant keyframe with the "animation-name" property
您不必在包装关键帧的媒体查询中再次调用选择器,因为您已经使用“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;}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.