Mail Animation using HTML & CSS Only

Hello friends, welcome to our blogspot TECH WITH ANURAG  and  in this blog we are going to learn how to create Mail Animation using HTML & CSS Only in this blog post.

Email is short for 'Electronic mail' and was planned as a program used to trade messages that are put away inside a computer. However, in most cases, a user can also send non-text records, for example, pictures, recordings, and sound documents through the mail as connections. Emails work in a similar usefulness as that of conventional paper mail. An email account works a similar route as a letter drop in which the message is put away until it is read by the user.

In this program(Mail Animation using HTML & CSS Only) first, on the webpage there is envelope when you hover on the envelope with slide animation the letter is appear that's looks cool on the webpage.

If any case you hard to understand what i try to explain. Please check our full content video tutorial on this program(Mail Animation).

Video Tutorial of Mail Animation

I hope you like this program and video tutorial😊

If you like this program(Mail Animation) and the video tutorial of this program and now you want to get source code of this program. Don't worry you easily get the source code of this program. 

To get the source code you simply need to look down.

You might like this:

• Animated Share Button Using Only HTML & CSS
• Image Overlay Hover Effects Using HTML and CSS
• Amazing Mail Button SVG Animation | HTML & CSS |
• Mobile Menu Design Using HTML & CSS (no Javascript)

Mail Animation  HTML & CSS [SOURCE CODE]

Before the sharing the codes of this program(Mail Animation using HTML & CSS Only).Let's talk about some important tags and codes of this program. First, you need to create two files one HTML File and another one is CSS File and link the CSS file to HTML file.

In HTML File first i created a <div> with the class name mydiv and under this <div> i created a another <div> with the class name mail. Then inside of mail <div> i created two another with the class name cover and another class name text in the text <div> i created a <h1> heading tag.

In CSS file first (if you not using boostrap) reset the all default padding and margin to 0.

HTML FILE:

<div class="mydiv"> <div class="mail"> <div class="cover"></div> <div class="text"><h1>@</h1></div> </div> </div>

CSS FILE:

*{margin: 0;padding: 0;} body{ background-color: #333; } .mydiv{ top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; } .mail{ width: 300px; height: 200px; background: #ff8789; position: relative; transform-style: preserve-3d; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; cursor: pointer; } .mail:before{ content: ''; position: absolute; top: 0; right: 0; border-left: 140px solid transparent; border-right: 150px solid #ff393c; border-top: 100px solid transparent; border-bottom: 100px solid #ff393c; z-index: 5; border-bottom-right-radius: 10px; } .mail:after{ content: ''; position: absolute; top: 0; left: 0; border-left: 150px solid #ff5355; border-right: 140px solid transparent; border-top: 100px solid transparent; border-bottom: 100px solid #ff5355; z-index: 4; border-bottom-left-radius: 10px; } .cover:before{ content: ''; position: absolute; top: 0; left: 0; border-left: 150px solid transparent; border-right: 150px solid transparent; border-top: 100px solid #ff8789; border-bottom: 100px solid transparent; z-index: 6; transform-origin: top; transform: rotateX(0deg); transition: all 1s 1s ease; } .text{ position: absolute; z-index: 3; top: 0; left: 10px; background-color: #dedede; width: 280px; height: 180px; border-radius: 20px; transition: all 1s ease; } .text h1{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 80px; color: #798992; font-weight: 900; } .mail:hover .cover:before{ transform: rotateX(180deg); transition: all 1s ease; } .mail:hover .text{ top: -180px; transition: all 1s 1s ease; }