Maison  >  Article  >  interface Web  >  Comment réaliser une animation d'exploration de chenille

Comment réaliser une animation d'exploration de chenille

php中世界最好的语言
php中世界最好的语言original
2018-03-20 13:50:136686parcourir

Cette fois, je vais vous montrer comment mettre en œuvre l'animation d'exploration de chenille. Quelles sont les précautions pour mettre en œuvre l'animation d'exploration de chenille. Ce qui suit est un cas pratique, jetons un coup d'œil.

Tout le monde a vu des chenilles lorsqu'il était enfant. Aujourd'hui, j'ai pensé à écrire une action d'exploration. Le code spécifique est le suivant :

code html :

<p class=&#39;container&#39;>
  <p class=&#39;hide left&#39;></p>
  <p class=&#39;hide right&#39;></p>
  <p class=&#39;hide bottom&#39;></p>
  <p class=&#39;circle-container&#39;>
    <p class=&#39;circle&#39;></p>
  </p>
</p>

code css :

 <style>
body {
  background-color: #1B6CB2;
  margin: 0;
}
.container {
  position: absolute;
  width: 600px;
  height: 400px;
  overflow: hidden;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
}
.hide {
  height: 100%;
  width: 150px;
  background: #1B6CB2;
  position: absolute;
  z-index: 2;
}
.hide.left {
  left: 0;
}
.hide.right {
  right: 0;
}
.hide.bottom {
  bottom: 0;
  width: 100%;
  height: 50%;
}
.circle {
  position: absolute;
  height: 75px;
  width: 150px;
  border: 3px solid white;
  border-radius: 50%/100% 100% 0 0;
  border-bottom: none;
  top: 40%;
  left: 50%;
  transform-origin: 0% 50%;
  transform: translate(-50%, -50%);
  animation: magic 1.8s ease infinite;
}
@keyframes magic {
  0% {
    transform: rotate(-170deg) translate(-50%, -50%);
  }
  50% {
    transform: rotate(0deg) translate(-50%, -50%);
  }
  100% {
    transform: rotate(180deg) translate(-50%, -50%);
  }
}
.circle-container {
  position: absolute;
  height: 75px;
  width: 150px;
  top: 40%;
  left: 50%;
  transform-origin: 0% 50%;
  transform: translate(-50%, -50%);
  animation: power 1.8s ease-out infinite;
}
@keyframes power {
  0% {
    margin-left: 20px;
  }
  50% {
    margin-left: -55px;
  }
  99.9% {
    margin-left: -130px;
  }
  100% {
    margin-left: 20px;
  }
}
  </style>

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour plus de passionnant. choses, veuillez faire attention à php chinois Autres articles connexes en ligne !

Lecture recommandée :

Technologie frontale pour implémenter la superposition de texture de texte

Explication détaillée de l'utilisation du mode de fusion CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn