Как сделать эту анимацию CSS отзывчивой? - PullRequest
Новая
       18

Как сделать эту анимацию CSS отзывчивой?

0 голосов
/ 07 ноября 2019

Я сейчас пытаюсь сделать анимацию, конечная позиция которой должна выглядеть следующим образом

enter image description here

Это работало нормально, пока я не переключился на разрешение <1080p,и теперь все испорчено и выглядит так: <a href="https://i.stack.imgur.com/SyqpZ.png" rel="nofollow noreferrer">enter image description here

Я использовал отзывчивый "vw /%" Так что я не понимаю, почему это происходит.

Theresручка с кодом: https://codepen.io/romancc/pen/VwwxWgb

и сам код 

 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>

Ответы [ 3 ]

2 голосов
/ 07 ноября 2019

Можете ли вы проверить с помощью этого кода, мы просто меняем размер фона соответственно другим объектам, чтобы поддерживать одинаковое соотношение сторон на каждом экране. надеюсь, это поможет вам. 

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>
1 голос
/ 07 ноября 2019

Я делаю изображение фиксированного размера. Попробуйте изменить размер с 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>
1 голос
/ 07 ноября 2019

Я думаю, вам нужно использовать медиа-запрос в соответствии с вашими изменениями ширины 

/* 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
  }
}

Надеюсь, это поможет вам. Дайте мне знать, если у вас возникнут проблемы.

...