Saya sedang membuat obrolan web. Halaman utama memiliki gambar latar dinamis yang diperbesar dengan mulus. Ada beberapa kata "selamat datang", kolom untuk input Nama Pengguna dan tombol Kirim. Semua elemen ini diperbesar bersama dengan gambar latar belakang. Apakah mungkin untuk menjadikannya non-animasi, diperbaiki di atas latar belakang?

Ini untuk membangun obrolan web dengan Flask, SocketIO, beberapa Vue, html dan css.

HTML:

  <div class="background">
      <head>
        ...
      </head>
      <body>
          <div class="container" id="app">
             <div v-if="state == 0">
                <h2>Welcome to this chat! Please choose a username</h2>
                <form @submit.prevent="setUsername">
                  <input type="text" placeholder="Username..." maxlength="25" v-model:value="username" />
                  <p><input type="submit" value="Join" v-bind:disabled = "username === ''"/></p>
                </form>
              </div>
              <div v-if="state == 1">
                  <ul id="chatbox">
                    <li v-for="msg in this.messages">
                      <b>[[ msg.user ]]</b> : [[ msg.message ]]
                    </li>
                  </ul>
                  <form @submit.prevent="sendMessage">
                  <input type="text" maxlength="600" size="65" placeholder="Message..." v-model:value="message" />
                  <input type="submit" value="Send" v-bind:disabled = "message ===''"/>
                  </form>
              </div>
          </div>

Dan CSS:

.background {
  margin: 0;
  padding: 0;
  background-image: url('../images/music.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  z-index: 1;
  text-align: center;
  -webkit-animation: zoomin 5s ease-in;
  animation: zoomin 5s ease-in;
}


@-webkit-keyframes zoomin {
  0% {transform: scale(1.15);}
  100% {transform: scale(1);}
}
@keyframes zoomin {
  0% {transform: scale(1.15);}
  100% {transform: scale(1);}
} /*End of Zoom in Keyframes */


#app {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      height: 75vh;
      width: 95vw;
      position: relative;
      z-index: 2;
}

Saya berharap tombol dan jendela input menjadi statis, tetapi diperbesar bersama dengan latar belakang.

Masalah lain adalah bahwa gambar latar belakang "melompat" sedikit ke belakang saat animasi memperbesar dilakukan.

0
Forestriver 28 Oktober 2019, 03:42

1 menjawab

Jawaban Terbaik

Animasi pada wadah induk akan mempengaruhi elemen dalam. Apa yang dapat Anda coba adalah menambahkan pseudo ke .background sehingga hanya akan terpengaruh pada elemen itu.

.background:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/music.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  -webkit-animation: zoomin 5s ease-in;
  animation: zoomin 5s ease-in;
}
1
Kaiser47 28 Oktober 2019, 10:40