Cet exercice consiste à dessiner un renard en HTML et CSS puis à l’animer en CSS.
Renard Animé
https://juliencrego.com/renard.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
https://juliencrego.com/renard.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é
https://juliencrego.com/renard.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: rgb(242, 83, 26); background: linear-gradient(to right, rgb(242, 83, 26) 0%, rgb(242, 83, 26) 50%, rgb(241, 64, 0) 51%, rgb(241, 64, 0) 71%, rgb(241, 64, 0) 100%); } .oreilles { position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 50px 110px 50px; border-color: transparent transparent rgb(242, 83, 26) transparent; transform-origin: center bottom; } .oreille_droite { transform: rotate(-30deg); left: 30px; } .oreille_gauche { transform: rotate(30deg); left: 170px; border-color: transparent transparent rgb(241, 64, 0) 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: rgb(19, 19, 19); } .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); } }