CSS动画屏幕响应

时间：2016-10-22 14:41:55

标签： html css html5 css3 responsive

我试图让这个CSS动画在不同的屏幕尺寸内响应，我创建了1366 x 768的屏幕尺寸，如何让它适合所有屏幕尺寸或放置这个http://thedtagency.com/images/hand.png和http://thedtagency.com/images/fist.png以小屏幕尺寸代替它。请找到以下代码：

HTML：

＆＃13;
＆＃13; 
.processes {
  height: 700px;
  width: 100%;
  /*background-color: powderblue;*/
}
.hand {
  height: 400px;
  position: absolute;
  bottom: 1%;
  left: 40%;
  opacity: 0;
  -webkit-animation: example1 40s infinite;
  /* Safari 4+ */
  -moz-animation: example1 40s infinite;
  /* Fx 5+ */
  -o-animation: example1 40s infinite;
  /* Opera 12+ */
  animation: example1 40s infinite;
  /* IE 10+, Fx 29+ */
}
.finger_one {
  height: 200px;
  position: absolute;
  bottom: 20%;
  left: 22%;
  opacity: 0;
  -webkit-animation: example2 40s infinite;
  /* Safari 4+ */
  -moz-animation: example2 40s infinite;
  /* Fx 5+ */
  -o-animation: example2 40s infinite;
  /* Opera 12+ */
  animation: example2 40s infinite;
  /* IE 10+, Fx 29+ */
}
.finger_two {
  height: 300px;
  position: absolute;
  bottom: 54%;
  left: 29%;
  opacity: 0;
  -webkit-animation: example3 40s infinite;
  /* Safari 4+ */
  -moz-animation: example3 40s infinite;
  /* Fx 5+ */
  -o-animation: example3 40s infinite;
  /* Opera 12+ */
  animation: example3 40s infinite;
  /* IE 10+, Fx 29+ */
}
.finger_three {
  height: 300px;
  position: absolute;
  bottom: 59%;
  left: 44%;
  opacity: 0;
  -webkit-animation: example4 40s infinite;
  /* Safari 4+ */
  -moz-animation: example4 40s infinite;
  /* Fx 5+ */
  -o-animation: example4 40s infinite;
  /* Opera 12+ */
  animation: example4 40s infinite;
  /* IE 10+, Fx 29+ */
}
.finger_four {
  height: 250px;
  position: absolute;
  bottom: 52%;
  left: 60%;
  opacity: 0;
  -webkit-animation: example5 40s infinite;
  /* Safari 4+ */
  -moz-animation: example5 40s infinite;
  /* Fx 5+ */
  -o-animation: example5 40s infinite;
  /* Opera 12+ */
  animation: example5 40s infinite;
  /* IE 10+, Fx 29+ */
}
.finger_five {
  height: 250px;
  position: absolute;
  bottom: 20%;
  left: 67%;
  opacity: 0;
  -webkit-animation: example6 40s infinite;
  /* Safari 4+ */
  -moz-animation: example6 40s infinite;
  /* Fx 5+ */
  -o-animation: example6 40s infinite;
  /* Opera 12+ */
  animation: example6 40s infinite;
  /* IE 10+, Fx 29+ */
}
.fist {
  height: 300px;
  position: absolute;
  bottom: 5%;
  left: 30%;
  opacity: 0;
  -webkit-animation: example7 40s infinite;
  /* Safari 4+ */
  -moz-animation: example7 40s infinite;
  /* Fx 5+ */
  -o-animation: example7 40s infinite;
  /* Opera 12+ */
  animation: example7 40s infinite;
  /* IE 10+, Fx 29+ */
}
.fist_bubble {
  height: 500px;
  position: absolute;
  bottom: 30%;
  left: 45%;
  opacity: 0;
  -webkit-animation: example8 40s infinite;
  /* Safari 4+ */
  -moz-animation: example8 40s infinite;
  /* Fx 5+ */
  -o-animation: example8 40s infinite;
  /* Opera 12+ */
  animation: example8 40s infinite;
  /* IE 10+, Fx 29+ */
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example1 {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example1 {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example2 {
  5% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example2 {
  5% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example3 {
  11% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example3 {
  11% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example4 {
  22% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example4 {
  22% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example5 {
  33% {
    opacity: 0;
  }
  38% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example5 {
  33% {
    opacity: 0;
  }
  38% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example6 {
  43% {
    opacity: 0;
  }
  48% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example6 {
  43% {
    opacity: 0;
  }
  48% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example7 {
  60% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example7 {
  60% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example8 {
  70% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example8 {
  70% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
＆＃13; 
<div class="processes">
  <img class="hand" src="" />
  <img class="finger_one" src="" />
  <img class="finger_two" src="" />
  <img class="finger_three" src="" />
  <img class="finger_four" src="" />
  <img class="finger_five" src="" />
  <img class="fist" src="" />
  <img class="fist_bubble" src="" />
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

我已经让流程响应了。我正在使用填充的已知技巧。

现在，布局中的所有内容都可以表示为百分比。你只是错过了身高...

这种布局在任何分辨率下都能正常工作。只是，如果你想保存带宽，你可以检查相关技术并使用不同的图像。但这是可选的。

＆＃13;
＆＃13; 
.processes {
  height: 0px;
  padding-bottom: 50%;
  width: 80%;
  background-color: powderblue;
  position: relative;
}
.hand {
  height: 50%;
  position: absolute;
  bottom: 1%;
  left: 40%;
  opacity: 0;
  animation: example1 40s infinite;
}
.finger_one {
  height: 50%;
  position: absolute;
  bottom: 5%;
  left: 1%;
  opacity: 0;
  animation: example2 40s infinite;
}
.finger_two {
  height: 50%;
  position: absolute;
  bottom: 47%;
  left: 22%;
  opacity: 0;
  animation: example3 40s infinite;
}
.finger_three {
  height: 50%;
  position: absolute;
  bottom: 52%;
  left: 42%;
  opacity: 0;
  animation: example4 40s infinite;
}
.finger_four {
  height: 50%;
  position: absolute;
  bottom: 43%;
  left: 60%;
  opacity: 0;
  animation: example5 40s infinite;
}
.finger_five {
  height: 50%;
  position: absolute;
  bottom: 1%;
  left: 67%;
  opacity: 0;
  animation: example6 40s infinite;
}
.fist {
  height: 75%;
  position: absolute;
  bottom: 5%;
  left: 35%;
  opacity: 0;
  animation: example7 40s infinite;
}
.fist_bubble {
  height: 71%;
  position: absolute;
  bottom: 30%;
  left: 45%;
  opacity: 0;
  animation: example8 40s infinite;
}

@-webkit-keyframes example1 {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example1 {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example2 {
  5% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example2 {
  5% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example3 {
  11% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example3 {
  11% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example4 {
  22% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example4 {
  22% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example5 {
  33% {
    opacity: 0;
  }
  38% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example5 {
  33% {
    opacity: 0;
  }
  38% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example6 {
  43% {
    opacity: 0;
  }
  48% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example6 {
  43% {
    opacity: 0;
  }
  48% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example7 {
  60% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example7 {
  60% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example8 {
  70% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example8 {
  70% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
＆＃13; 
<div class="processes">
  <img class="hand" src="http://thedtagency.com/images/process/hand.png" />
  <img class="finger_one" src="http://thedtagency.com/images/process/finger_1.png" />
  <img class="finger_two" src="http://thedtagency.com/images/process/finger_2.png" />
  <img class="finger_three" src="http://thedtagency.com/images/process/finger_3.png" />
  <img class="finger_four" src="http://thedtagency.com/images/process/finger_4.png" />
  <img class="finger_five" src="http://thedtagency.com/images/process/finger_5.png" />
  <img class="fist" src="http://thedtagency.com/images/process/fist.png" />
  <img class="fist_bubble" src="http://thedtagency.com/images/process/fist_1.png" />
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您需要使用@media。

因此，您的动画可以保持不变，因为它们只是基于不透明度。您需要选择合理的断点，然后只需覆盖元素的大小调整属性。

/* browser window up to 320px wide */
@media screen and (max-width: 320px) {
.processes {
    height: 50px;
}
/* browser window between 321px and 480px wide */
@media screen and (min-width: 321px) and (max-width: 480px) {
.processes {
    height: 100px;
}
等等等等。通常最好从最小的开始，然后朝着最大的方向努力。显然，不同的屏幕尺寸需要对它们进行一些调整。

相关问题
最新问题