html - 言语淡入无 react

我是Web开发的新手。我是第一次为客户建立一个网站。当我缩小窗口时，我的褪色“ INNOATIVE ..... EDUCATION”相互撞毁。我希望它们成为反应灵敏，能够保持一致，但尺寸会变小。如果有人可以帮助我，我将不胜感激。

https://jsfiddle.net/dL9m41se/

狂暴的CSS：

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
/*margin-left: auto;
  margin-right: auto;*/
   /*width: 10%;
  height: 3%;*/
}

.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
/*margin-left: auto;
  margin-right: auto;*/
/*   width: 10%;
  height: 3%;*/
}

.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
/*margin-left: auto;
  margin-right: auto;*/
  /* width: 10%;
  height: 3%;*/
}



.fade-in.four {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
 padding-left: 12%;
 /* margin-left: auto;
  margin-right: auto;*/
/*  width: 10%;
  height: 3%;
}*/

}


.fade-in.five {
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
animation-delay: 2.4s;
/*margin-left: auto;
  margin-right: auto;*/
/*   width: 10%;
  height: 3%;*/
}



.box{
  padding-left:8%;
  width: 16.7%;
  height: 5%;

position: relative;
margin: .8%;
float: left;
overflow:inherit;
/*border: 1px solid #333;
background: #999;*/
}

最佳答案

一种选择是使用视口单位vw作为字体大小

font-size: 2.5vw;

样本片段

  @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
/*margin-left: auto;
  margin-right: auto;*/
   /*width: 10%;
  height: 3%;*/
}

.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
/*margin-left: auto;
  margin-right: auto;*/
/*   width: 10%;
  height: 3%;*/
}

.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
/*margin-left: auto;
  margin-right: auto;*/
  /* width: 10%;
  height: 3%;*/
}



.fade-in.four {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
 padding-left: 12%;
 /* margin-left: auto;
  margin-right: auto;*/
/*  width: 10%;
  height: 3%;
}*/

}


.fade-in.five {
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
animation-delay: 2.4s;
/*margin-left: auto;
  margin-right: auto;*/
/*   width: 10%;
  height: 3%;*/
}



.box{
  padding-left:8%;
  width: 16.7%;
  height: 5%;
font-size: 2.5vw;
position: relative;
margin: .8%;
float: left;
overflow:inherit;
/*border: 1px solid #333;
background: #999;*/
}

  <div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner">
      <div class="item active" style="background-image: url(images/slider/1.jpg">
        <div class="caption">
          <div class="center-div-words" >
            <h1> <span style="color: #000;font-family: 'Special Elite', cursive; ">CENTER FOR MEMBRANE STUDY</span></h1>
            <p style="font-size: 100%;font-family: 'Special Elite', cursive;"><span class="box fade-in one" id="1">INNOATIVE</span><span class="box fade-in two" id="2">COLLABORATIVE</span><span></span><span class="box fade-in three" id="3"> INTERDISCIPLINARY</span><span class="box fade-in four" id="4">RESEARCH</span>
           <span class="box fade-in five" id="5">EDUCATION</span>
           </p>
          </div><!-- center-div-words -->
        </div> <!-- caption -->
      </div> <!-- image -->



</div><!--/#home-slider-->
 

关于html - 言语淡入无 react ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41900800/