[英]make text change color at different screen size with animation using keyframes
我试图制作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*/
任何帮助将非常感激。
css:你没有指定浏览器前缀,例如。 -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*/
移动你的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;
}
}
工作小提琴 - 您将看到我在媒体查询中将width
减小到300px
和600px
,这样您就可以轻松查看更改是否正在发生。
试试下面的内容。 您不必在包装关键帧的媒体查询中再次调用选择器,因为您已经使用“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.