Animations CSS : Renard CSS27

Publié le par Julien Crego
Mise à jour le

Cet exercice consiste à dessiner un renard en HTML et CSS puis à l’animer en CSS.

Renard animé
http://exemple.com/index.html

Consignes de l’exercice

Créez un nouveau fichier .html et associez-lui une feuille de style.

Observez bien le dessin du renard et essayer de le reproduire le plus fidèlement possible en utilisant uniquement HTML et CSS. Pensez à commencer par délimiter votre zone de dessin.

Renard
http://exemple.com/index-fixe.html

Observez maintenant les animations des différents éléments constituant le renard et reproduisez-les. Vous pouvez ajouter autant d’effets que vous le souhaitez.

Renard animé
http://exemple.com/index.html

Correction

Cliquez sur le bouton suivant pour afficher le code HTML et le code CSS de cet exercice.

Solution HTML :
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Renard</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>


    <div class="renard">
        <div class="oreilles oreille_droite">
          <div class="oreilles_int"></div>
        </div>
        <div class="oreilles oreille_gauche">
          <div class="oreilles_int"></div>
        </div>
      
        <div class="renard_tete">
          <div class="renard_tete_int">
            <div class="couleur_yeux couleur_yeux_droite"></div>
            <div class="couleur_yeux couleur_yeux_gauche"></div>
            <div class="yeux yeux_droite">
              <div class="yeux_paupieres"></div>
              <div class="yeux_int"></div>
            </div>
            <div class="yeux yeux_gauche">
              <div class="yeux_paupieres"></div>
              <div class="yeux_int"></div>
            </div>
            <div class="nez"></div>
          </div>
        </div>
      
        <div class="moustache moustache_gauche_1"></div>
        <div class="moustache moustache_gauche_2"></div>
        <div class="moustache moustache_gauche_3"></div>
        <div class="moustache moustache_droite_1"></div>
        <div class="moustache moustache_droite_2"></div>
        <div class="moustache moustache_droite_3"></div>
      
      </div>


</body>

</html>

Solution CSS :

body {
  background-color: #e5e5e5;
}

/* DESSIN RENARD */
.renard {
  position: relative;
  display: flex;
  width: 300px;
  height: 300px;
  margin: auto;
}

.renard_tete {
  margin: auto;
  width: 200px;
  height: 200px;
  transform: rotate(45deg);
  transform-origin: center center;
  border-radius: 100px 5px 0 5px;
  position: relative;
  overflow: hidden;
}

.renard_tete_int {
  position: absolute;
  top: -10px;
  left: -30px;
  border-color: #f00;
  width: 290px;
  height: 250px;
  transform: rotate(-45deg);
  border-top-color: #0f0;
  box-sizing: border-box;
  background: rgba(242, 83, 26, 1);
  background: -moz-linear-gradient(left, rgba(242, 83, 26, 1) 0%, rgba(242, 83, 26, 1) 50%, rgba(241, 64, 0, 1) 51%, rgba(241, 64, 0, 1) 71%, rgba(241, 64, 0, 1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(242, 83, 26, 1)), color-stop(50%, rgba(242, 83, 26, 1)), color-stop(51%, rgba(241, 64, 0, 1)), color-stop(71%, rgba(241, 64, 0, 1)), color-stop(100%, rgba(241, 64, 0, 1)));
  background: -webkit-linear-gradient(left, rgba(242, 83, 26, 1) 0%, rgba(242, 83, 26, 1) 50%, rgba(241, 64, 0, 1) 51%, rgba(241, 64, 0, 1) 71%, rgba(241, 64, 0, 1) 100%);
  background: -o-linear-gradient(left, rgba(242, 83, 26, 1) 0%, rgba(242, 83, 26, 1) 50%, rgba(241, 64, 0, 1) 51%, rgba(241, 64, 0, 1) 71%, rgba(241, 64, 0, 1) 100%);
  background: -ms-linear-gradient(left, rgba(242, 83, 26, 1) 0%, rgba(242, 83, 26, 1) 50%, rgba(241, 64, 0, 1) 51%, rgba(241, 64, 0, 1) 71%, rgba(241, 64, 0, 1) 100%);
  background: linear-gradient(to right, rgba(242, 83, 26, 1) 0%, rgba(242, 83, 26, 1) 50%, rgba(241, 64, 0, 1) 51%, rgba(241, 64, 0, 1) 71%, rgba(241, 64, 0, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2531a', endColorstr='#f14000', GradientType=1);
}

.oreilles {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 110px 50px;
  border-color: transparent transparent rgba(242, 83, 26, 1) transparent;
  transform-origin: center bottom;
}

.oreille_droite {
  transform: rotate(-30deg);
  left: 30px;
}

.oreille_gauche {
  transform: rotate(30deg);
  left: 170px;
  border-color: transparent transparent rgba(241, 64, 0, 1) transparent;
}

.oreilles_int {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 90px 40px;
  border-color: transparent transparent #b34218 transparent;
  top: 30px;
  left: -40px;
}

.couleur_yeux {
  background-color: #e6ddbe;
  width: 200px;
  height: 200px;
  position: absolute;
  border-radius: 100px 100px 70px 70px;
  top: 60px;
}

.couleur_yeux_droite {
  left: -75px;
}

.couleur_yeux_gauche {
  left: 166px;
}

.yeux {
  background-color: #333;
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 20px;
  top: 130px;
  overflow: hidden;
}

.yeux_droite {
  left: 90px;
}

.yeux_gauche {
  left: 180px;
}

.yeux_paupieres {
  position: absolute;
  width: 20px;
  height: 0px;
  background-color: #c0b695;
  z-index: 5;
}

.yeux_int {
  background-color: #fff;
  width: 8px;
  height: 8px;
  position: absolute;
  border-radius: 20px;
  top: 3px;
  left: 3px;
  z-index: 3;
}

.nez {
  width: 200px;
  height: 200px;
  position: absolute;
  border-radius: 100px 100px 70px 70px;
  top: 215px;
  left: 47px;
  background: rgba(19, 19, 19, 1);
}

.moustache {
  position: absolute;
  width: 80px;
  height: 0px;
  border: 1px solid #333;
}

.moustache_gauche_1 {
  top: 230px;
  left: 40px;
}

.moustache_gauche_2 {
  top: 235px;
  left: 35px;
}

.moustache_gauche_3 {
  top: 240px;
  left: 40px;
}

.moustache_droite_1 {
  top: 230px;
  left: 180px;
}

.moustache_droite_2 {
  top: 235px;
  left: 185px;
}

.moustache_droite_3 {
  top: 240px;
  left: 180px;
}

/* ANIMATION */

.renard {
  animation-name: renard;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: center bottom;
}

@keyframes renard {

  0%,
  40% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(5deg);
  }
}

.oreille_droite {
  animation-name: oreille_droite;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  transform-origin: center bottom;
}

@keyframes oreille_droite {

  0%,
  60% {
    transform: rotate(-30deg);
  }

  80% {
    transform: rotate(-20deg);
  }

  90% {
    transform: rotate(-40deg);
  }

  100% {
    transform: rotate(-30deg);
  }
}

.oreille_gauche {
  animation-name: oreille_gauche;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes oreille_gauche {

  0%,
  60% {
    transform: rotate(30deg);
  }

  80% {
    transform: rotate(20deg);
  }

  90% {
    transform: rotate(40deg);
  }

  100% {
    transform: rotate(30deg);
  }
}

.yeux_paupieres {
  animation-name: paupiere;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes paupiere {

  0%,
  90% {
    height: 0px;
  }

  100% {
    height: 20px;
  }
}

.moustache_droite_1 {
  animation-name: moustache_droite_1;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  transform-origin: left center;
}

@keyframes moustache_droite_1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-5deg);
  }
}

.moustache_droite_2 {
  animation-name: moustache_droite_2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  transform-origin: left center;
}

@keyframes moustache_droite_2 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-3deg);
  }
}

.moustache_droite_3 {
  animation-name: moustache_droite_3;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  transform-origin: left center;
}

@keyframes moustache_droite_3 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(2deg);
  }
}

.moustache_gauche_1 {
  animation-name: moustache_gauche_1;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  transform-origin: right center;
}

@keyframes moustache_gauche_1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(5deg);
  }
}

.moustache_gauche_2 {
  animation-name: moustache_gauche_2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  transform-origin: right center;
}

@keyframes moustache_gauche_2 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(3deg);
  }
}

.moustache_gauche_3 {
  animation-name: moustache_gauche_3;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  transform-origin: right center;
}

@keyframes moustache_gauche_3 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-2deg);
  }
}
Solution :

Consultez ce code créé par crego (@crego) sur le site CodePen.

Sauf mention contraire*, l'article Animations CSS : Renard [CSS27] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

S’abonner
Notification pour
guest

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

0 Commentaires
Commentaires en ligne
Afficher tous les commentaires