Categories
CSS HTML Web development

CSS Bouncing Envelope / Contact Animation

CSS Bouncing Envelope / Contact Animation

To learn how to create the CSS Bouncing Envelope follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="contact-envelope">
  <div class="envelope">
    <div class="envelope-back"></div>
    <div class="message"></div>
    <div class="envelope-front"></div>
  </div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.contact-envelope {
  position: relative;
  border-radius: 50%;
  background-color: #4987f4;
  width:200px;
  height: 200px;
  z-index:-1;
}

Style the envelope:

.envelope {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width:200px;
  height: 200px;
  animation: bounce 1s ease infinite;
}

.envelope-back {
  position: absolute;
  background-color: #e19605;
  width:110px;
  height: 70px;
  top:80px;
  z-index:1;
}

.envelope-back:before {
  content:"";
  position: absolute;
  background-color: #e19605;
  border-radius:10px;
  width: 84px;
  height: 84px;
  top:-39px;
  left:13px;
  transform: rotate(-45deg);
}

.message {
  position: absolute;
  z-index:2;
  background-color: #eae2b7;
  width:90px;
  height: 95px;
}

.message:before {
  content:"";
  position: absolute;
  background-color: #ced4da;
  width: 75px;
  height: 3px;
  left:7.5px;
  top:12px;
  box-shadow: 0 10px #ced4da, 0 20px #ced4da, 0 30px #ced4da, 0 40px #ced4da, 0 50px #ced4da, 0 60px #ced4da, 0 70px #ced4da;
}

.envelope-front:before, .envelope-front {
  position: absolute;
  width:0;
  height:0;
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;
}

.envelope-front {
  border-right: 60px solid #f9c748;
  z-index:3;
  left:95px;
  top:80px;
}

.envelope-front:before {
  content:"";
  border-left: 60px solid #f9c748;
  left:-50px;
  top:-35px;
}

.envelope-front:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-bottom: 45px solid #fcb933;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
  left:-50px;
  top:-10px;
}

Add the shadow:

.shadow {
  position: absolute;
  width: 110px;
  height: 10px;
  background-color: rgba(0,0,0,0.4);
  border-radius:50%;
  top:145px;
  left:45px;
  z-index:-2;
  animation: scale 1s linear infinite;
}

Step3.

Add CSS Animation

 @keyframes bounce {
        0%   { transform: scale(1,1) translateY(0); }
        10%  { transform: scale(1.1,.9) translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-55px);}
        50%  { transform: scale(1.05,.95) translateY(0); }
        58%  { transform: scale(1,1) translateY(-7px); }
        65%  { transform: scale(1,1) translateY(0);}
        100% { transform: scale(1,1) translateY(0);}
    }

@keyframes scale {
  0% {transform: scaleX(1);}
  10% {transform: scaleX(1);}
  30% {transform: scaleX(0.5);}
  50% {transform: scaleX(1.1);}
  58% {transform: scaleX(1);}
  75% {transform: scaleX(0.98);}
  100% {transform: scaleX(1);}
}

Enjoy coding!

Watch also the video tutorial:

Hey, here’s something that might interest you:

CSS Bouncing Text Animation

CSS Bouncing Basketball

Pure CSS Envelope (Open/Close on click)

Categories
CSS Web development

CSS Bouncing Text Animation

CSS Bouncing Text Effect

Demo:

*to see the animation on the website click here.

To create the CSS Bouncing Text Effect follow the steps below and watch the video tutorial.

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="bouncing-text">
  <div class="b">B</div>
  <div class="o">O</div>
  <div class="u">U</div>
  <div class="n">N</div>
  <div class="c">C</div>
  <div class="e">E</div>
  <div class="shadow"></div>
  <div class="shadow-two"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  height: 100vh;
  align-items: center;
  justify-content:center;
  display: flex;
}

.bouncing-text {
  position: relative;
  display: flex;
  font-size: 70px;
  font-family: arial black;  
}

Style the letters:

.b, .o, .u, .n, .c, .e {
  color: #4cc9f0;
  text-shadow: 0 3px #4361ee, 0 5px #4361ee, 0 7px #4361ee;
}
CSS Bounce effect text animation

Add the bounce effect animation:

 @keyframes bounce {
        0%   { transform: scale(1,1) translateY(0); }
        10%  { transform: scale(1.1,.9) translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-55px);}
        50%  { transform: scale(1.05,.95) translateY(0); }
        58%  { transform: scale(1,1) translateY(-7px); }
        65%  { transform: scale(1,1) translateY(0);}
        100% { transform: scale(1,1) translateY(0);}
    }

.b {
  animation: bounce 1s ease infinite;
}

.o {
  animation: bounce 1s ease infinite .1s;
}

.u {
  animation: bounce 1s ease infinite .2s;
}

.n {
  animation: bounce 1s ease infinite .3s;
}

.c {
  animation: bounce 1s ease infinite .4s;
}

.e {
  animation: bounce 1s ease infinite .5s;
}

Add the shadow:

.bouncing-text:before, .bouncing-text:after {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.4);
  width: 50px;
  height:5px;
  border-radius:50%;
  top:82px;
  z-index:-1;
}

.shadow, .shadow-two {
  position: absolute;
  top:82px;
  z-index:-1;
}

.shadow:before, .shadow:after, .shadow-two:before, .shadow-two:after {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.4);
  width: 50px;
  height:5px;
  border-radius:50%;
  top:0;  
}

.bouncing-text:before {
  left:0;
  animation: scale 1s linear infinite;
}

@keyframes scale {
  0% {transform: scaleX(1);}
  25% {transform: scaleX(0.4);}
  50% {transform: scaleX(1);}
  75% {transform: scaleX(0.9);}
  100% {transform: scaleX(1);}
}

.bouncing-text:after {
  left: 57px;
  animation: scale 1s linear infinite .1s;
}

.shadow:before {
  left: 116px;
  animation: scale 1s linear infinite .2s;
}

.shadow:after {
  left:175px;
  animation: scale 1s linear infinite .3s;
}

.shadow-two:before {
  left:232px;
  animation: scale 1s linear infinite .4s;
}

.shadow-two:after {
  left: 285px;
  animation: scale 1s linear infinite .5s;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Slide Text Animation/ Slide Effect

CSS Mirror/ Reflection Text Effect

CSS Sliced Text Effect

Categories
CSS Web development

CSS Bouncing Basketball

CSS Bouncing Basketball

Demo:

*to see the animation on the website click here.

To create the CSS Bouncing Basketball follow the steps below and watch the video tutorial:

Step1.

Add HTML

<div class="basketball">
    <div class="ball">
    <div class="lines"></div>
    </div>
  <div class="shadow"></div>
  </div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
}

.basketball {
  position: relative;
  top: 50px;
  left:-50px;
}

Style the ball:

.ball {
  position: absolute;
  background-color: #e76f51;
  border-radius:50%;
  width:100px;
  height:100px;
  overflow: hidden;
  border: 3px solid #333;
  animation: bounce 1.5s ease-in infinite;
}
.ball:before, .ball:after {
  content:"";
  position: absolute;
  background-color: #333;
  width:110px;
  height:3px;
  top:50px;
  left:-5px;
}

.ball:before {
  transform: rotate(45deg);
}

.ball:after {
  transform: rotate(-45deg);
}

.lines {
  position: absolute;
  border-radius:50%;
  border: 3px solid #333;
  width:70px;
  height:70px;
  left:-20px;
  top:-20px;
}

.lines:before {
  content:"";
  position: absolute; 
  border-radius:50%;
  border: 3px solid #333;
  width:70px;
  height:70px;
  top:65px;
  left:60px;
}

Add the shadow:

.shadow {
  position: absolute;
  width:100px;
  height:15px;
  background-color: rgba(0,0,0,0.2);
  border-radius:50%;
  top:95px;
  z-index:-1;
  left:3px;
  animation: scale 1.5s ease-in infinite;
}

Step3.

Add CSS Animation

To make the ball bounce:

@keyframes bounce {
   0% {transform: translate3d(0, 0, 0) rotate(0deg);}
  25% {transform: translate3d(0, -185px, 0) rotate(90deg);}
  50% {transform: translate3d(0, 0, 0) rotate(180deg);}
  75% {transform: translate3d(0, -185px, 0) rotate(270deg);}
  100% {transform: translate3d(0, 0, 0) rotate(360deg);}
}

Scale the shadow:

@keyframes scale {
  0% {transform: scaleX(1);}
  25% {transform: scaleX(0.7);}
  50% {transform: scaleX(1);}
  75% {transform: scaleX(0.7);}
  100% {transform: scaleX(1);}
}

To see the animation on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Paper Plane Animation

CSS Umbrella (Open/Close on Click)

CSS Parallax Scrolling Effect