Mam następujący kod animacji w CSS i HTML:

Index.html:

<!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>Animation/LipstickAd</title>

  <link rel= "stylesheet" href = "style.css"></a>



  </head>
  <body>
  <div id="logos" class = "main1">
      <img src="moveable_part.png" height="750px" class="center"></img>
  </div>

  <div class="main">
          <img id="lipstick_ad" src="lipstick_ad.png" height="750px" class="center"></img>
  </div>
</body>
</html>

Gdzie style.css ma:


#logos{
  position: relative;
  -webkit-animation: mymove 2s infinite;

}

    @-webkit-keyframes mymove {

      0%{
        top:80px;
        opacity:0%;
        /* -webkit-animation-timing-function: ease-in; */

      }

      50%{
        opacity:100%;
        top:50px;
        /* -webkit-animation-timing-function: ease-out; */
      }

      100%{
        top:80px;
      }


    }


    .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.main1 {
  position: fixed;
  top: 80px;
  right: -285px;
  width: 200px;
  height: 100px;
}

Działa to świetnie na pełnym ekranie (znalazłem właściwy px do użycia metodą prób i błędów), ale jak tylko zmienię rozmiar przeglądarki, położenie elementów w main1 (górna część szminki się zmienia) i wygląda to okropnie.

Jak mogę to zapobiec?

Dzięki!

0
Evan 20 listopad 2019, 23:24

1 odpowiedź

Celem Metatag Viewport jest uzyskanie responsywności na stronie internetowej, aby zapobiec domyślnej responsywności przy zmianie rozmiaru, po prostu ją usuń.
Użyj poniższego kodu HTML lub Usuń linię meta widocznego obszaru z kodu

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

<head>
  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Animation/LipstickAd</title>

  <link rel= "stylesheet" href = "style.css"></a>



  </head>
  <body>
  <div id="logos" class = "main1">
      <img src="moveable_part.png" height="750px" class="center"></img>
  </div>

  <div class="main">
          <img id="lipstick_ad" src="lipstick_ad.png" height="750px" class="center"></img>
  </div>
</body>
</html>
0
Anshul Chaurasia 21 listopad 2019, 08:04
Wyjaśnij swoją odpowiedź, a nie tylko podaj kod. Co robi twoja zmiana?
 – 
Zombie_Pigdragon
20 listopad 2019, 23:44
Dzięki, zredagowałem moją odpowiedź z wyjaśnieniem.
 – 
Anshul Chaurasia
21 listopad 2019, 08:04
Hmm dzięki za odpowiedź, ale to nie zadziałało
 – 
Evan
21 listopad 2019, 09:10