如何使这个css动画响应？答案

【问题标题】：How to make this css animation responsive?如何使这个css动画响应？
【发布时间】：2020-03-03 18:23:07
【问题描述】：

我目前正在尝试制作一个动画，其结束位置应如下所示，如下图所示，不是动画

在我切换到

我使用响应式“vw / %”所以我不明白为什么会这样。

还有代码本身

 body {
        background-image: url("https://i.imgur.com/I6ixFFG.jpg");

    }
/* background sky */
    .fondo {
        background-image: url("https://i.imgur.com/UAq0obS.png");
        width: 50vw;
        height: 20vw;
        background-size: cover;
        margin: 0 auto;
        overflow: hidden;
        position: relative;

    }
/* Frontal waves */
     .olasFront {
        background-image: url("https://i.imgur.com/w5yrlLy.png");
        position: absolute;
        width: 80vw;
        height: 13.5vw;
        z-index: 3;
        bottom: -9vw;
        left: -1vw;

        animation: olas-front 2s infinite linear;
        animation-iteration-count: infinite;
        background-repeat: repeat-x; 

     } 
/* back waves */
    .olasBack {
        background-image: url("https://i.imgur.com/e1DVYvt.png");
        position: absolute;
        width: 80vw;
        height: 14vw;
        z-index: 1;
        bottom: -9vw;
        left: -2vw;
        animation: olas-back 2s infinite linear;
        animation-iteration-count: infinite;
        background-repeat: repeat-x;

    }
/* boat */
    .bote {
        background-image: url("https://i.imgur.com/Fk4CUZp.png");
        position: relative;
        z-index: 2;
        width: 26vw;
        height: 20vw;
        background-repeat: no-repeat;
        bottom: -7.6vw;
        animation: barco 2s linear, barco-balanceo 2s linear infinite;
    }
/* question mark */
    #interrogacion {
        background-image: url("https://i.imgur.com/1g1A4sx.png");
        width: 5vw;
        height: 5vw;
        position: relative;
        background-repeat: no-repeat;
        margin-left: 10vw;
        bottom: 1.5vw;
        opacity: 0;
        animation: 2s interrogacion 2s linear;
        animation-fill-mode: forwards;

    }
/* Frontal waves */
    @keyframes olas-front {
        0% {
            left: -1vw;
            bottom: -9vw;
        }

        50% {
            left: 0vw;
            bottom: -8.7vw;
        }

        100% {
            left: -1vw;
            bottom: -9vw;
        }


    }
/* back waves */
    @keyframes olas-back {
        0% {
            left: -2vw;
            bottom: -9vw;
        }

        50% {
            left: -3vw;
            bottom: -8.7vw;
        }

        100% {
            left: -2vw;
            bottom: -9vw;
        }
    }
/* boat */
    @keyframes barco {
        0% {
            left: -7vw;

        }

        100% {
            left: 0vw;
        }
    }
/* boat */
    @keyframes barco-balanceo {
        0% {
            bottom: -7.6vw;

        }

        50% {
            bottom: -7.9vw;

        }

        100% {
            bottom: -7.6vw;

        }
    }
/* question mark */
    @keyframes interrogacion {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


</head>

<body>

    <div class="fondo"> <!-- background sky -->
        <div class="olasFront"></div> <!-- Frontal waves -->
        <div class="bote"> <!-- boat -->
            <div id="interrogacion"> <!-- question mark -->

            </div>
        </div>
        <div class="olasBack"></div> <!-- back waves -->
    </div>

</body>

</html>

【问题讨论】：

我认为您应该定义background-size 来正确调整图像的大小，并且可能是background-position 或translate 来制作动画。可悲的是，我认为您必须重新调整您的价值观才能使其正常工作。
div.fondo 中的所有元素都应该相对于容器 (div.fondo) 而不是相对于窗口定位

标签： html css css-animations

【解决方案1】：

使用此代码，我们只需相应地更改其他对象的背景大小，以在每个屏幕中保持相同的纵横比。

body {background-image: url("https://i.imgur.com/I6ixFFG.jpg");}
.fondo {
background-image: url("https://i.imgur.com/UAq0obS.png");
width: 50vw;
height: 20vw;
background-size: cover;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.olasFront {
background-image: url("https://i.imgur.com/w5yrlLy.png");
position: absolute;
width: 80vw;
height: 13.5vw;
z-index: 3;
bottom: -9vw;
left: -1vw;
animation: olas-front 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x; 
background-size:4vw auto;
}
.olasBack {
background-image: url("https://i.imgur.com/e1DVYvt.png");
position: absolute;
width: 80vw;
height: 14vw;
z-index: 1;
bottom: -9vw;
left: -2vw;
animation: olas-back 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
background-size:4vw auto;
}
.bote {
background-image: url("https://i.imgur.com/Fk4CUZp.png");
position: relative;
z-index: 2;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size:13vw auto;
bottom: -7.6vw;
animation: barco 2s linear, barco-balanceo 2s linear infinite;
}
#interrogacion {
background-image: url("https://i.imgur.com/1g1A4sx.png");
width: 100%;
height: 100%;
position: relative;
background-repeat: no-repeat;
background-size:1vw auto;
margin-left: 10vw;
bottom: 1.5vw;
opacity: 0;
animation: 2s interrogacion 2s linear;
animation-fill-mode: forwards;
}
@keyframes olas-front {
0% {left: -1vw;bottom: -9vw;}
50% {left: 0vw;bottom: -8.7vw;}
100% {left: -1vw;bottom: -9vw;}
}
@keyframes olas-back {
0% {left: -2vw; bottom: -9vw;}
50% {left: -3vw;bottom: -8.7vw;}
100% {left: -2vw;bottom: -9vw;}
}
@keyframes barco {
0% {left: -7vw;}
100% {left: 0vw;}
}

@keyframes barco-balanceo {
0% {bottom: -7.6vw;}
50% {bottom: -7.9vw;}
100% {bottom: -7.6vw;}
}

@keyframes interrogacion {
from {opacity: 0;}
to {opacity: 1;}
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="fondo"> <!-- background sky -->
        <div class="olasFront"></div> <!-- Frontal waves -->
        <div class="bote"> <!-- boat -->
            <div id="interrogacion"> <!-- question mark -->

            </div>
        </div>
        <div class="olasBack"></div> <!-- back waves -->
    </div>
</body>
</html>

【讨论】：

【解决方案2】：

我认为你需要根据你的宽度变化使用媒体查询

/* If screen size is 1050px wide, or less*/
@media screen and (max-width: 1050px) {
   #interrogacion{
    margin-left: 20vw;
     bottom : 1.8vw;
     //change your css as per requirenment
  }
}

【讨论】：

【解决方案3】：

我使图像固定大小。尝试使用codepen调整大小

body {
            background-image: url("https://i.imgur.com/I6ixFFG.jpg");

        }

        .fondo {
            background-image: url("https://i.imgur.com/UAq0obS.png");
            width: 50vw;
            height: 30vw;
            min-height: 250px;
            background-size: cover;
            margin: 0 auto;
            overflow: hidden;
            position: relative;

        }

         .olasFront {
            background-image: url("https://i.imgur.com/w5yrlLy.png");
            position: absolute;
            width: 120%;
            height: 75px;
            z-index: 3;
            bottom: -6%;
            left: -3%;
            
            animation: olas-front 2s infinite linear;
            animation-iteration-count: infinite;
            background-repeat: repeat-x; 

         } 

        .olasBack {
            background-image: url("https://i.imgur.com/e1DVYvt.png");
            position: absolute;
            width: 100%;
            width: 120%;
            height: 75px;
            z-index: 1;
            bottom: 0;
            left: -2%;
            animation: olas-back 2s infinite linear;
            animation-iteration-count: infinite;
            background-repeat: repeat-x;

        }

        .bote {
            background-image: url("https://i.imgur.com/Fk4CUZp.png");
            position: absolute;
            z-index: 2;
            height: 215px;
            width: 100%;
            background-repeat: no-repeat;
            bottom: -10%;
            animation: barco 2s linear, barco-balanceo 2s linear infinite;
        }

        #interrogacion {
            background-image: url("https://i.imgur.com/1g1A4sx.png");
            width: 50px;
            height: 50px;
            position: absolute;
            background-repeat: no-repeat;
            top: -30px;
            left: 190px;
            opacity: 0;
            animation: 2s interrogacion 2s linear;
            animation-fill-mode: forwards;

        }

        @keyframes olas-front {
            0% { left: -3%; }
            50% { left: 0; }
            100% { left: -3%; }
        }

        @keyframes olas-back {
            0% { left: -2%; }
            50% { left: -5%; }
            100% { left: -2%; }
        }

        @keyframes barco {
            0% { left: -7vw; }

            100% { left: 0vw; }
        }

        @keyframes barco-balanceo {
            0% { bottom: -10%;}

            50% { bottom: -12%; }

            100% { bottom: -10%; }
        }

        @keyframes interrogacion {
            from { opacity: 0; }
            to { opacity: 1; }
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    
</head>

<body>

    <div class="fondo">
        <div class="olasFront"></div>
        <div class="bote">
            <div id="interrogacion">

            </div>
        </div>
        <div class="olasBack"></div>
    </div>

</body>
<!-- Frontal waves -->
</html>

【讨论】：