
To learn how to create the CSS Bouncing Envelope follow the steps below and watch the video tutorial.
Demo:
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:
Pure CSS Envelope (Open/Close on click)