A la recherche d'aide pour animer une image à travers la page

Question

Permettez-moi de préciser que je suis un énorme débutant en HTML/CSS. J'essaie de faire en sorte qu'une image PNG soit animée à travers la page et j'ai trouvé ce CodePen qui réalise quelque peu ce que je recherche. Pour l'instant, il s'agit simplement de carrés animés qui deviennent arrondis lorsqu'ils flottent vers le haut.

Est-ce que quelqu'un pourrait me pointer dans la bonne direction pour remplir ces carrés avec une image PNG? Ou est-ce que j'essaie de faire quelque chose d'impossible? (Je cherche depuis 3 heures maintenant)

@import url("https://fonts.googleapis.com/css?family=Exo:400,700");

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: "Exo", sans-serif;
}

.context {
  width: 100%;
  position: absolute;
  top: 50vh;
}

.context h1 {
  text-align: center;
  color: #fff;
  font-size: 50px;
}

.area {
  background: #4e54c8;
  background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
  width: 100%;
  height: 100vh;
}

.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate 25s linear infinite;
  bottom: -150px;
}

.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-durati...

  Fond animé Pure Css

Answer 1

Utilisation de la propriété background-image: url(''):

En utilisant la propriété background-image:, vous pouvez modifier l'arrière-plan des éléments enfants de la classe circles dans ce cas les éléments de liste

• . Ici, je les change tous en une seule image, mais vous pourriez définir chaque élément

• individuellement. La propriété background-image: peut être définie sur une url de l'image background-image: url('') dans les guillemets '' vous pouvez spécifier le chemin/url de l'image. Pour vous assurer que l'image ne soit pas rognée, vous pouvez ajouter la propriété background-size et la définir sur background-size: 100% 100% pour remplir l'élément entier. Si vous souhaitez que l'image ne se déforme pas, utilisez background-image: cover et définissez la position en utilisant background-position: un exemple est background-position: 50% 50%.

  

  Eléments de classe à ajouter une propriété à (CSS):

  .circles li{
      position: absolute;
      display: block;
      list-style: none;
      width: 20px;
      height: 20px;
      background: rgba(255, 255, 255, 0.2);
      animation: animate 25s linear infinite;
      bottom: -150px;
      background-image: url('https://picsum.photos/200'); 
      background-size: 100% 100%;
  }

  Jeu de scripts exécutables (HTML/CSS):

  @import url('https://fonts.googleapis.com/css?family=Exo:400,700');
  
  *{
      margin: 0px;
      padding: 0px;
  }
  
  body{
      font-family: 'Exo', sans-serif;
  }
  
  .context {
      width: 100%;
      position: absolute;
      top:50vh;
  
  }
  
  .context h1{
      text-align: center;
      color: #fff;
      font-size: 50px;
  }
  
  .area{
      background: #4e54c8;  
      background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
      width: 100%;
      height:100vh;
  
  }
  
  .circles{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }
  
  .circles li{
      position: absolute;
      display: block;
      list-style: none;
      width: 20px;
      height: 20px;
      background: rgba(255, 255, 255, 0.2);
      animation: animate 25s linear infinite;
      bottom: -150px;
      background-image: url('https://picsum.photos/200');  
      background-size: 100% 100%;
  
  }
  
  .circles li:nth-child(1){
      left: 25%;
      width: 80px;
      height: 80px;
      animation-delay: 0s;
  }
  
  .circles li:nth-child(2){
      left: 10%;
      width: 20px;
      height: 20px;
      animation-delay: 2s;
      animation-duration: 12s;
  }
  
  .circles li:nth-child(3){
      left: 70%;
      width: 20px;
      height: 20px;
      animation-delay: 4s;
  }
  
  .circles li:nth-child(4){
      left: 40%;
      width: 60px;
      height: 60px;
      animation-delay: 0s;
      animation-duration: 18s;
  }
  
  .circles li:nth-child(5){
      left: 65%;
      width: 20px;
      height: 20px;
      animation-delay: 0s;
  }
  
  .circles li:nth-child(6){
      left: 75%;
      width: 110px;
      height: 110px;
      animation-delay: 3s;
  }
  
  .circles li:nth-child(7){
      left: 35%;
      width: 150px;
      height: 150px;
      animation-delay: 7s;
  }
  
  .circles li:nth-child(8){
      left: 50%;
      width: 25px;
      height: 25px;
      animation-delay: 15s;
      animation-duration: 45s;
  }
  
  .circles li:nth-child(9){
      left: 20%;
      width: 15px;
      height: 15px;
      animation-delay: 2s;
      animation-duration: 35s;
  }
  
  .circles li:nth-child(10){
      left: 85%;
      width: 150px;
      height: 150px;
      animation-delay: 0s;
      animation-duration: 11s;
  }
  
  @keyframes animate {
  
      0%{
          transform: translateY(0) rotate(0deg);
          opacity: 1;
          border-radius: 0;
      }
  
      100%{
          transform: translateY(-1000px) rotate(720deg);
          opacity: 0;
          border-radius: 50%;
      }
  
  }
  
          Fond d'écran animé en pure CSS

Answer 2

Si vous voulez une image différente dans chaque cercle alors vous pouvez mettre le nom de l'image correspondante dans chacun de ceux-ci

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
    background-image: url(image.png);
}

Vous mentionnez remplir chaque bulle donc dans le réglage général pour chaque réglage ajoutez

.circles li { background-size: cover; }

Si vous voulez vous assurer que l'intégralité d'une image apparaît dans chaque bulle alors utilisez contain au lieu de cover.

Answer 3

Vous pouvez utiliser simplement img au lieu de li.

@import url("https://fonts.googleapis.com/css?family=Exo:400,700");

* {
    margin: 0px;
    padding: 0px;
}

body {
    font-family: "Exo", sans-serif;
}

.context {
    width: 100%;
    position: absolute;
    top: 50vh;
}

.context h1 {
    text-align: center;
    color: #fff;
    font-size: 50px;
}

.area {
    background: #4e54c8;
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
    width: 100%;
    height: 100vh;
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles img {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
}

.circles img:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.circles img:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles img:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles img:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles img:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles img:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles img:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles img:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles img:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles img:nth-child(10) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

  Fond animé Pure Css