HTML 5 et CSS 3

Une animation de NoĂ«l en HTML et CSS : 🎀Festive Christmas Gift 🎁

Sur le site codepen.io, vous pourrez découvrir un code HTML/CSS intitulé Festive Christmas Gift proposé par Priyanka Patel. Ce code vous permet de mettre en place un cadeau de Noël duquel apparait un ourson.

animation noel HTML/CSS

Le code HTML :

<body>
  <div class="light-one"></div>
  <div class="light-two"></div>
  <div class="present">
    <div class="ribbon">
      <div class="ribbon-line-left"></div>
      <div class="ribbon-line-right"></div>
      <div class="ribbon-part-left"></div>
      <div class="ribbon-part-right"></div>
      <div class="ribbon-cut-out"></div>
    </div>

    <div class="teddy-santa-hat">
      <div class="teddy-santa-hat-part"></div>
    </div>
    <div class="teddy-bear">
      <div class="bear-left-ear"></div>
      <div class="bear-right-ear"></div>
      <div class="bear-left-eye"></div>
      <div class="bear-right-eye"></div>
      <div class="bear-nose"></div>
      <div class="bear-mouth"></div>
    </div>

    <div class="box-lid">
      <div class="box-top-lid"></div>
      <div class="box-left-lid"></div>
      <div class="box-front-lid"></div>
      <div class="box-right-lid"></div>
      <div class="box-back-lid"></div>
    </div>

    <div class="box">
      <div class="box-left"></div>
      <div class="box-front"></div>
    </div>
    <div class="back-box-cover">
      <div class="box-right"></div>
      <div class="box-back"></div>
    </div>
    <div class="tree-left"></div>
    <div class="tree-right"></div>
  </div>
</body>

Le code CSS :

body {
   background-color: #2d2416;
   align-items: center;
   display: flex;
   margin: 0;
   padding: 0;
   height: 100%;
   animation: background-change 7s ease-in-out alternate infinite;
 }
 
 @keyframes background-change {
   0% {
     background-color: #2d2416;
   }
   50% {
     background-color: #192d16;
   }
   100% {
     background-color: #2d1629;
   }
 }
 
 .light-one,
 .light-two {
   height: 31%;
   position: absolute;
   top: 9px;
   width: 100%;
   background-image: radial-gradient(circle, #f17900 12%, transparent 0%), radial-gradient(circle, #be0e0e 12%, transparent 1%);
   background-size: 100px 100px;
   background-position: 0 0, 50px 50px;
   animation: blinking 2s linear infinite;
 }
 
 .light-two {
   background-image: radial-gradient(circle, #002fff 10%, transparent 0%), radial-gradient(circle, #6c00c5 14%, transparent 0%);
   background-size: 100px 100px;
   background-position: -49px -20px, 88px -35px;
   animation: blinking 2s linear 1s infinite;
 }
 
 @keyframes blinking {
   50% {
     opacity: 0.2;
     background-size: 100.1px 100px;
   }
 }
 
 .present {
   position: absolute;
   left: 40%;
   bottom: 35%;
   animation: moving-present 1s ease-in-out 1s 3;
 }
 
 @keyframes moving-present {
   0% {
     transform: scaley(1);
   }
   20% {
     transform: translateY(90px);
   }
   40% {
     transform: scalex(1.05);
   }
   100% {
     transform: scaley(1.1);
   }
 }
 
 .ribbon {
   width: 40px;
   height: 40px;
   background: red;
   border-radius: 100px / 50px;
   position: absolute;
   box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
   transform: rotate(-6deg);
   top: -152px;
   left: 91px;
   z-index: 2;
   transform-style: preserve-3d;
   animation:  moving-ribbon 2.4s ease-in 3s both;
 }
 
 @keyframes moving-ribbon {
   35% {
      top: -316px;
      left: 136px;
      transform: rotateX(0deg) rotateY(0deg) rotateZ(23deg);
    }

   88% {
     top: -189px;
     left: 259px;
     transform: rotateX(63deg) rotateY(67deg) rotateZ(4deg);
     
   }
   100% {
     visibility: hidden;
     top: -152px;
     left: 291px;
     transform: rotateX(63deg) rotateY(72deg) rotateZ(20deg);
   }
 } 

 .ribbon::after {
   content: "";
   position: absolute;
   width: 20px;
   height: 64px;
   top: 8px;
   left: -11px;
   background: red;
   transform: rotate(43deg);
 }
 
 .ribbon::before {
   content: "";
   position: absolute;
   width: 21px;
   height: 73px;
   top: 5px;
   left: 17px;
   background: red;
   transform: rotate(-27deg);
 }
 
 .ribbon-part-left {
   width: 0;
   height: 0;
   position: absolute;
   border-top: 45px solid transparent;
   border-right: 87px solid red;
   border-bottom: 14px solid transparent;
   border-radius: 9px;
   right: 16px;
   bottom: -7px;
   transform: rotate(216deg);
 }
 
 .ribbon-part-left::before {
   content: '';
   position: absolute;
   width: 50px;
   height: 148px;
   background: radial-gradient(ellipse at 49% 71%, #de2121 19%, transparent 2%);
   transform: rotate(-119deg);
   top: -88px;
   right: -56px;
 }
 
 .ribbon-part-left::after {
   content: '';
   position: absolute;
   width: 41px;
   height: 177px;
   transform: rotate(97deg);
   background: radial-gradient(ellipse at 76% 75%, #ff0000 13%, transparent 1%);
   left: 83px;
   top: -86px;
 }
 
 .ribbon-part-right {
   width: 0;
   height: 0;
   position: absolute;
   border-top: 45px solid transparent;
   border-right: 87px solid red;
   border-bottom: 14px solid transparent;
   border-radius: 9px;
   transform: rotate(-20deg);
   top: -20px;
   right: -51px;
 }
 
 .ribbon-part-right::before {
   content: '';
   position: absolute;
   width: 56px;
   height: 148px;
   background: radial-gradient(ellipse at 49% 71%, #de2121 19%, transparent 2%);
   transform: rotate(-83deg);
   top: -72px;
   right: -55px;
 }
 
 .ribbon-part-right::after {
   content: '';
   position: absolute;
   width: 56px;
   height: 146px;
   background: radial-gradient(ellipse at 49% 71%, #ff0000 19%, transparent 2%);
   transform: rotate(-111deg);
   top: -93px;
   right: -60px;
 }
 
 .ribbon-line-left {
   position: absolute;
   margin-top: 8px;
   width: 19px;
   height: 1px;
   left: -22px;
   z-index: 1;
   transform: rotate(22deg);
   background-color: #ca0c0c;
 }
 
 .ribbon-line-left::before {
   content: '';
   position: absolute;
   top: -9px;
   left: 0;
   width: 20px;
   height: 1px;
   transform: rotate(20deg);
   background-color: #ca0c0c;
 }
 
 .ribbon-line-left::after {
   content: '';
   position: absolute;
   top: 7px;
   left: 0;
   width: 19px;
   height: 1px;
   transform: rotate(167deg);
   background-color: #ca0c0c;
 }
 
 .ribbon-line-right {
   position: absolute;
   margin-top: 8px;
   width: 19px;
   height: 1px;
   left: 41px;
   z-index: 1;
   transform: rotate(152deg);
   background-color: #ca0c0c;
 }
 
 .ribbon-line-right::before {
   content: '';
   position: absolute;
   top: -9px;
   left: 0;
   width: 20px;
   height: 1px;
   transform: rotate(20deg);
   background-color: #ca0c0c;
 }
 
 .ribbon-line-right::after {
   content: '';
   position: absolute;
   top: 7px;
   left: 0;
   width: 19px;
   height: 1px;
   transform: rotate(167deg);
   background-color: #ca0c0c;
 }
 
 .ribbon-cut-out {
   position: absolute;
   width: 0;
   height: 0;
   top: 54px;
   left: -29px;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 12px solid #b91e1e;
   transform: rotate(41deg);
   z-index: 1;
 }
 
 .ribbon-cut-out::before {
   content: '';
   position: absolute;
   width: 0;
   height: 0;
   top: -34px;
   left: 43px;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 12px solid #e01d1d;
   transform: rotate(-60deg);
   z-index: 1;
 }
 
 .ribbon-cut-out::after {
   content: '';
   width: 43px;
   height: 33px;
   border-radius: 99px / 84px;
   position: absolute;
   top: -69px;
   left: -21px;
   z-index: 1;
   transform: rotate(-33deg);
   border: 1px solid;
   color: #ab1313;
 }

 .box,
 .box-lid,
 .back-box-cover {
   height: 240px;
   top: 50px;
   position: absolute;
   transform-style: preserve-3d;
   transform: rotateX(261deg) rotateY(0deg) rotateZ(-140deg);
   width: 240px;
   bottom: 100px;
 }

 .back-box-cover {
   z-index: -1;
 }
 
 .box-lid {
   top: -160px;
   left: 0px;
   z-index: 1;
   animation: moving-lid 4s ease-in 3s forwards;
 }
 
 @keyframes moving-lid {
   20% {
     top: -336px;
     left: 0px;
     transform: rotateX(262deg) rotateY(-21deg) rotateZ(-138deg);
   }
   100% {
     top: -29px;
     left: 352px;
     transform: rotateX(263deg) rotateY(-181deg) rotateZ(-139deg);
   }
 }
 
 .box-top-lid {
   height: 105%;
   left: 0px;
   position: absolute;
   top: -6px;
   width: 101%;
   background: #b91e1e;
   transform: translateZ(-72px);
 }
 
 .box-top-lid::before {
   position: absolute;
   content: '';
   height: 26%;
   left: -3px;
   top: 83px;
   width: 101%;
   background: #8eb767;
 }
 
 .box-top-lid::after {
   position: absolute;
   content: '';
   height: 25%;
   left: -14px;
   top: 91px;
   width: 107%;
   transform: rotate(92deg);
   background: #8eb767;
 }
 
 .box-front,
 .box-front-lid {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
   background: #e01d1d;   
   transform: rotateX(90deg) scaleY(0.9);
   transform-origin: bottom;
   background-image: radial-gradient(#ffffff 17%, transparent 19%);
   background-size: 60px 60px;
 }
 
 .box-front-lid {
   transform: rotateX(90deg) scaleY(0.3);
   box-shadow: 0px 82px 12px #0000000f;
   width: 101%;
   height: 101%;
   top: 4px;
   border-top: solid 2px #ff4a4a;
   background: #e01d1d;
 }
 
 .box-back,
 .box-back-lid {
   height: 100%;
   left: 0;
   position: absolute;
   top: -241px;
   width: 100%;
   background: #901010;
   transform: rotateX(90deg) scaleY(0.9);
   transform-origin: bottom;
 }
 
 .box-back-lid {
   transform: rotateX(90deg) scaleY(0.3);
 }
 
 .box-front::after,
 .box-front-lid::after {
   content: '';
   height: 101%;
   position: absolute;
   top: -2px;
   left: 84px;
   background: #9ec778;
   width: 60px;
 }
 
 .box-left,
 .box-left-lid {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   background: #b91e1e;
   transform: translateZ(-216px) rotateY(90deg) scaleX(0.9);
   transform-origin: right;
   width: 240px;
   background-image: radial-gradient(#ffffff 17%, transparent 19%);
   background-size: 60px 60px;
 }
 
 .box-left-lid {
   transform: translateZ(-72px) rotateY(90deg) scaleX(0.3);
   width: 246px;
   height: 105%;
   top: -3px;
   left: -4px;
   box-shadow: -74px -5px 12px #0000000f;
   background: #b91e1e;
 }
 
 .box-left::after,
 .box-left-lid::after {
   content: '';
   height: 100%;
   position: absolute;
   top: -17px;
   left: 89px;
   background: #9ec778;
   width: 60px;
   transform: rotate(90deg);
 }
 
 .box-right,
 .box-right-lid {
   height: 100%;
   left: -236px;
   position: absolute;
   top: 0;
   background: #901010;
   transform: translateZ(-216px) rotateY(90deg) scaleX(0.9);
   transform-origin: right;
   width: 240px;
 }
 
 .box-right-lid {
   transform: translateZ(-70px) rotateY(90deg) scaleX(0.3);
   top: -1px;
   left: -239px;
   height: 249px;
   border-top: solid 2px #750707;
 }

 .teddy-bear {
   background: #cc8b4e;
   position: absolute;
   top: -104px;
   left: 5px;
   height: 173px;
   width: 201px;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
   animation: moving-teddy-bear 2s ease-in-out 3s forwards;
   z-index: 0;
 }
 
 @keyframes moving-teddy-bear {
   100% {
     top: -198px;
   }
 }
 
 .teddy-bear::before {
   content: '';
   background: #cc8b4e;
   position: absolute;
   top: 77px;
   left: 24px;
   height: 93px;
   width: 154px;
   border-radius: 50% / 50%;
 }
 
 .teddy-bear::after {
   content: '';
   background: #cc8b4e;
   position: absolute;
   top: 139px;
   left: 24px;
   height: 50px;
   width: 150px;
   border-radius: 90px 90px 0 0;
   z-index: -1;
 }
 
 .bear-left-ear,
 .bear-right-ear {
   position: absolute;
   width: 65px;
   height: 60px;
   top: -13px;
   left: -6px;
   background: #cc8b4e;
   z-index: -1;
   border-radius: 50px / 47px;
 }
 
 .bear-left-ear::before,
 .bear-right-ear::before {
   content: '';
   position: absolute;
   width: 45px;
   height: 40px;
   top: 11px;
   left: 10px;
   background: #ffc793;
   z-index: -1;
   border-radius: 50px / 47px;
 }
 
  .bear-right-ear::after {
   content: '';
   background: #cc8b4e;
   position: absolute;
   top: 12px;
   left: -140px;
   height: 173px;
   width: 201px;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
 } 
 
 .bear-right-ear {
   left: 140px;
 }
 
 .bear-left-eye {
   position: absolute;
   left: 53px;
   top: 45px;
   width: 20px;
   height: 20px;
   background-color: black;
   border-radius: 50%;
   border: solid 2px #000000;
 }
 
 .bear-left-eye::after {
   content: '';
   position: absolute;
   right: 6px;
   top: 4px;
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background-color: #ffffff;
   border: solid 1px #ffffff;
   animation: moving-teddy-eyes 2s ease 4.8s alternate;
 }
 
 .bear-right-eye {
   position: absolute;
   left: 124px;
   top: 45px;
   width: 20px;
   height: 20px;
   background-color: black;
   border-radius: 50%;
   border: solid 2px #000000;
 }
 
 .bear-right-eye::after {
   content: '';
   position: absolute;
   right: 6px;
   top: 4px;
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background-color: #ffffff;
   border: solid 1px #ffffff;
   animation: moving-teddy-eyes 2s ease-in-out 4.8s alternate;
 }
 
 @keyframes moving-teddy-eyes {
   100% {
     width: 4.5px;
     height: 4.5px;
   }
 }
 
 .bear-nose,
 .bear-nose:before,
 .bear-nose:after {
   position: absolute;
   width: 0;
   height: 0;
   right: 78px;
   top: 88px;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   border-top: 20px solid black;
   border-radius: 50%;
 }
 
 .bear-nose:before {
   content: '';
   right: -15px;
   top: -21px;
   transform: rotate(125deg);
 }
 
 .bear-nose:after {
   content: '';
   right: -14px;
   top: -22.5px;
   transform: rotate(-125deg);
 }
 
 .bear-mouth {
   position: absolute;
   top: 102px;
   left: 106px;
   width: 20px;
   height: 20px;
   border: 3px solid black;
   border-radius: 92px;
   border-bottom-color: transparent;
   border-left-color: transparent;
   transform: rotate(130deg);
 }
 
 .bear-mouth::before {
   content: '';
   position: absolute;
   top: 14px;
   left: 12px;
   width: 20px;
   height: 20px;
   border: 3px solid black;
   border-radius: 92px;
   border-bottom-color: transparent;
   border-left-color: transparent;
   animation: moving-teddy-mouth 2s ease-in-out 5s alternate;
 }
 
 @keyframes moving-teddy-mouth {
   100% {
     height: 21px;
   }
 }
 
 .bear-mouth::after {
   content: '';
   position: absolute;
   top: 12px;
   left: 11px;
   width: 3px;
   height: 20px;
   transform: rotate(50deg);
   background-color: black;
 }
 
 .tree-left,
 .tree-right {
   position: absolute;
   width: 0;
   height: 0;
   left: 11px;
   top: 26px;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-bottom: 13px solid #ffffff;
   transform: rotate(3deg);
 }
 
 .tree-right {
   left: 200px;
   top: 24px;
   transform: rotate(-1deg);
 }
 
 .tree-left::before,
 .tree-right::before {
   content: '';
   position: absolute;
   width: 0;
   height: 0;
   left: -9px;
   top: 6px;
   border-left: 9px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 22px solid #ffffff;
 }
 
 .tree-left::after,
 .tree-right::after {
   content: '';
   position: absolute;
   width: 0;
   height: 0;
   left: -12px;
   top: 15px;
   border-left: 12px solid transparent;
   border-right: 12px solid transparent;
   border-bottom: 22px solid #ffffff;
 }
 
 .teddy-santa-hat {
   position: absolute;
   top: -97px;
   left: -25px;
   width: 153px;
   height: 60px;
   background: white;
   border-radius: 118px / 80px;
   transform: rotate(-21deg);
   z-index: -1;
   animation: moving-teddy-hat 2s ease-in-out 3s forwards;
 }
 
 @keyframes moving-teddy-hat {
   21% {
     z-index: 1;
   }
   100% {
     z-index: 1;
     top: -205px;
   }
 }
 
 .teddy-santa-hat::before {
   content: '';
   background: #ff0000;
   position: absolute;
   top: -37px;
   left: 16px;
   height: 67px;
   width: 122px;
   border-radius: 112px 260px 0 0;
   z-index: -1;
 }
 
 .teddy-santa-hat::after {
   content: '';
   position: absolute;
   top: 5px;
   left: -58px;
   width: 0;
   height: 0;
   border-left: 125px solid transparent;
   border-right: 44px solid transparent;
   border-top: 67px solid #ff0000;
   border-radius: 74px;
   z-index: -2;
   transform: rotate(-56deg);
 }
 
 .teddy-santa-hat-part {
   position: absolute;
   top: 53px;
   left: -47px;
   width: 38px;
   height: 40px;
   background: white;
   border-radius: 50%;
 }

Source : https://codepen.io/Priyanka_Patel/pen/wvzJxGw

5 1 Vote
Évaluation de l'article
Tweetez
Partagez
Partagez
Enregistrer

Vous pourriez aussi aimer

Halloween Pumpkin Loader

Halloween Pumpkin Loader

Créer une ombre interne en CSS3 sur des blocs HTML

3 effets aquatiques en CSS pour vos textes

S'abonner
Recevoir des notifications pour :
guest

* * Cette case Ă  cocher est obligatoire

*

J'accepte

0 Commentaires
Nouveaux
Anciens Meilleurs votes
Commentaires publiés
Voir tous les commentaires