CSS动画屏幕响应

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

HTML：

.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; 
 
    } 
 
}

<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>

来源

2016-10-22 SteveW

您尝试使用'媒体query'？ –

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

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

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

.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; 
 
    } 
 
}

<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>

来源

2016-10-22 19:07:30 vals

令人惊叹！谢谢！ – SteveW

您将需要使用@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; 
}

等等等等。通常最好从最小的一个开始，并朝着最大的一个努力。显然不同的屏幕尺寸需要一些调整。

来源

2016-10-22 15:56:56

CSS动画屏幕响应

回答

相关问题