Mail anim
How do I make an mail anim?
What is a mail anim? How do you make a mail anim? This script and codes were developed by AxeLVaisper on 09 November 2022, Wednesday.
Mail anim Previews
Mail anim - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mail anim</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#bg { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; background: #ffffff; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-radial-gradient(center, ellipse cover, #ffffff 40%, #bbbbbb 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(40%,#ffffff), color-stop(100%,#bbbbbb)); background: -webkit-radial-gradient(center, ellipse cover, #ffffff 40%,#bbbbbb 100%); background: -o-radial-gradient(center, ellipse cover, #ffffff 40%,#bbbbbb 100%); background: -ms-radial-gradient(center, ellipse cover, #ffffff 40%,#bbbbbb 100%); background: radial-gradient(ellipse at center, #ffffff 40%,#bbbbbb 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bbbbbb',GradientType=1 );
}
.contact * { -webkit-backface-visibility: hidden; }
.paper:hover { color:#000; }
.contact { position: absolute; left: 50%; top: 50%; margin-left: -125px; margin-top: -125px; height: 250px; width: 250px; background: rgba(0, 0, 0, 0.1); border-radius: 2px; -ms-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-border-radius: 2px;
}
.contact .envelope { position: absolute; height: 93px; width: 165px; left: 50%; margin-left: -83px; top: 50%; margin-top: -50px; background: #F9F9F9; transition: margin-top 300ms; -ms-transition: margin-top 300ms; -moz-transition: margin-top 300ms; -o-transition: margin-top 300ms; -webkit-transition: margin-top 300ms;
}
.contact:hover .envelope { transition-delay: 150ms; -ms-transition-delay: 150ms; -moz-transition-delay: 150ms; -o-transition-delay: 150ms; margin-top: -20px;
}
.contact .envelope .top { position: absolute; top: -3px; left: 0px; width: 100%; height: 73px; z-index: 30; overflow: hidden; transform-origin: top; -ms-transform-origin: top; -moz-transform-origin: top; -o-transform-origin: top; -webkit-transform-origin: top; transition: transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms; -ms-transition: -ms-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms; -moz-transition: -moz-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms; -o-transition: -o-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms; -webkit-transition: -webkit-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
}
.contact:hover .envelope .top { transition: transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms; -ms-transition: -ms-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms; -moz-transition: -moz-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms; -o-transition: -o-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms; -webkit-transition: -webkit-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms; height: 10px; top: -60px; transform: rotateX(180deg); -ms-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -webkit-transform: rotateX(180deg);
}
.contact .envelope .outer { position: absolute; bottom: 0px; left: 0px; border-left: 83px solid transparent; border-right: 82px solid transparent; border-top: 70px solid #EEE;
}
.contact .envelope .outer .inner { position: absolute; left: -81px; top: -73px; border-left: 81px solid transparent; border-right: 80px solid transparent; border-top: 68px solid #333;
}
.contact .envelope .bottom { position: absolute; z-index: 20; bottom: 0px; left: 2px; border-left: 81px solid transparent; border-right: 80px solid transparent; border-bottom: 45px solid #333;
}
.contact .envelope .left { position: absolute; z-index: 20; top: 0px; left: 0px; border-left: 81px solid #333; border-top: 45px solid transparent; border-bottom: 45px solid transparent;
}
.contact .envelope .right { position: absolute; z-index: 20; top: 0px; right: 0px; border-right: 80px solid #333; border-top: 45px solid transparent; border-bottom: 45px solid transparent;
}
.contact .envelope .cover { position: absolute; z-index: 15; bottom: 0px; left: 0px; height: 55%; width: 100%; background: #EEE;
}
.contact .envelope .paper { position: absolute; height: 83px; padding-top: 10px; width: 100%; top: 0px; left: 0px; background: #F9F9F9; z-index: 10; transition: margin-top 300ms 0ms; -ms-transition: margin-top 300ms 0ms; -moz-transition: margin-top 300ms 0ms; -o-transition: margin-top 300ms 0ms; -webkit-transition: margin-top 300ms 0ms;
}
.contact:hover .envelope .paper { margin-top: -60px; transition: margin-top 300ms 150ms; -ms-transition: margin-top 300ms 150ms; -moz-transition: margin-top 300ms 150ms; -o-transition: margin-top 300ms 150ms; -webkit-transition: margin-top 300ms 150ms;
}
.contact .envelope .paper a { position: relative; display: block; font-size: 14px; margin: 5px; margin-bottom: 0px; text-align: center; color: #333; text-decoration: none;
}
.contact .envelope .paper a { color: #333; transition: color 200ms; -ms-transition: color 200ms; -moz-transition: color 200ms; -o-transition: color 200ms; -webkit-transition: color 200ms;
}
.contact .envelope .paper a:hover { color: gray;
}
.contact .envelope .paper a.call:hover .i { border-color: #DDD;
}
.contact .envelope .paper a.mail .i { position: absolute; top: 0px; left: 17px; display: inline-block; font-size: 13px; font-weight: bold;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="bg"></div>
<div class="contact"> <div class="envelope"> <div class="top"> <div class="outer"><div class="inner"></div></div> </div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> <div class="cover"></div> <div class="paper"> <a class="call" href="tel:00000000"><i class="icon-phone"></i> 0 000 00 00</a> <a class="mail" href="mailto:mail@mail"><i class="icon-envelope"></i> mail@mail</a> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Mail anim - Script Codes CSS Codes
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#bg { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; background: #ffffff; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-radial-gradient(center, ellipse cover, #ffffff 40%, #bbbbbb 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(40%,#ffffff), color-stop(100%,#bbbbbb)); background: -webkit-radial-gradient(center, ellipse cover, #ffffff 40%,#bbbbbb 100%); background: -o-radial-gradient(center, ellipse cover, #ffffff 40%,#bbbbbb 100%); background: -ms-radial-gradient(center, ellipse cover, #ffffff 40%,#bbbbbb 100%); background: radial-gradient(ellipse at center, #ffffff 40%,#bbbbbb 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bbbbbb',GradientType=1 );
}
.contact * { -webkit-backface-visibility: hidden; }
.paper:hover { color:#000; }
.contact { position: absolute; left: 50%; top: 50%; margin-left: -125px; margin-top: -125px; height: 250px; width: 250px; background: rgba(0, 0, 0, 0.1); border-radius: 2px; -ms-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-border-radius: 2px;
}
.contact .envelope { position: absolute; height: 93px; width: 165px; left: 50%; margin-left: -83px; top: 50%; margin-top: -50px; background: #F9F9F9; transition: margin-top 300ms; -ms-transition: margin-top 300ms; -moz-transition: margin-top 300ms; -o-transition: margin-top 300ms; -webkit-transition: margin-top 300ms;
}
.contact:hover .envelope { transition-delay: 150ms; -ms-transition-delay: 150ms; -moz-transition-delay: 150ms; -o-transition-delay: 150ms; margin-top: -20px;
}
.contact .envelope .top { position: absolute; top: -3px; left: 0px; width: 100%; height: 73px; z-index: 30; overflow: hidden; transform-origin: top; -ms-transform-origin: top; -moz-transform-origin: top; -o-transform-origin: top; -webkit-transform-origin: top; transition: transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms; -ms-transition: -ms-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms; -moz-transition: -moz-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms; -o-transition: -o-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms; -webkit-transition: -webkit-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
}
.contact:hover .envelope .top { transition: transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms; -ms-transition: -ms-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms; -moz-transition: -moz-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms; -o-transition: -o-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms; -webkit-transition: -webkit-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms; height: 10px; top: -60px; transform: rotateX(180deg); -ms-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -webkit-transform: rotateX(180deg);
}
.contact .envelope .outer { position: absolute; bottom: 0px; left: 0px; border-left: 83px solid transparent; border-right: 82px solid transparent; border-top: 70px solid #EEE;
}
.contact .envelope .outer .inner { position: absolute; left: -81px; top: -73px; border-left: 81px solid transparent; border-right: 80px solid transparent; border-top: 68px solid #333;
}
.contact .envelope .bottom { position: absolute; z-index: 20; bottom: 0px; left: 2px; border-left: 81px solid transparent; border-right: 80px solid transparent; border-bottom: 45px solid #333;
}
.contact .envelope .left { position: absolute; z-index: 20; top: 0px; left: 0px; border-left: 81px solid #333; border-top: 45px solid transparent; border-bottom: 45px solid transparent;
}
.contact .envelope .right { position: absolute; z-index: 20; top: 0px; right: 0px; border-right: 80px solid #333; border-top: 45px solid transparent; border-bottom: 45px solid transparent;
}
.contact .envelope .cover { position: absolute; z-index: 15; bottom: 0px; left: 0px; height: 55%; width: 100%; background: #EEE;
}
.contact .envelope .paper { position: absolute; height: 83px; padding-top: 10px; width: 100%; top: 0px; left: 0px; background: #F9F9F9; z-index: 10; transition: margin-top 300ms 0ms; -ms-transition: margin-top 300ms 0ms; -moz-transition: margin-top 300ms 0ms; -o-transition: margin-top 300ms 0ms; -webkit-transition: margin-top 300ms 0ms;
}
.contact:hover .envelope .paper { margin-top: -60px; transition: margin-top 300ms 150ms; -ms-transition: margin-top 300ms 150ms; -moz-transition: margin-top 300ms 150ms; -o-transition: margin-top 300ms 150ms; -webkit-transition: margin-top 300ms 150ms;
}
.contact .envelope .paper a { position: relative; display: block; font-size: 14px; margin: 5px; margin-bottom: 0px; text-align: center; color: #333; text-decoration: none;
}
.contact .envelope .paper a { color: #333; transition: color 200ms; -ms-transition: color 200ms; -moz-transition: color 200ms; -o-transition: color 200ms; -webkit-transition: color 200ms;
}
.contact .envelope .paper a:hover { color: gray;
}
.contact .envelope .paper a.call:hover .i { border-color: #DDD;
}
.contact .envelope .paper a.mail .i { position: absolute; top: 0px; left: 17px; display: inline-block; font-size: 13px; font-weight: bold;
}
| Developer | AxeLVaisper |
| Username | AxeLVaisper |
| Uploaded | November 09, 2022 |
| Rating | 4.5 |
| Size | 4,945 Kb |
| Views | 26,312 |
Do you need developer help for Mail anim?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
AxeLVaisper (AxeLVaisper) Script Codes
| Name | Size |
| Login Form | 4,303 Kb |
| Icofont hover effects | 5,719 Kb |
| Tabs with Round Out Borders | 3,248 Kb |
| Bootstrap captcha | 2,435 Kb |
| Funny Spider XD | 4,045 Kb |
| 3D accordion | 13,545 Kb |
| Funny menu | 4,671 Kb |
| Tabs | 13,949 Kb |
| Metro KIT UI | 13,936 Kb |
| Ribbons | 6,941 Kb |
Create amazing web content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Flat buttons for Eliassen.com | Kdooley89 | 1,737 Kb |
| Base64 SVG Me | MrBambule | 44,786 Kb |
| CSS3 Button Examples | Volusion | 3,377 Kb |
| Realistic Buttons | Stoypenny | 2,248 Kb |
| NAV WPMANAGER | Mstoic | 1,991 Kb |
| Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
| Social Profiles | Lachlanjc | 1,939 Kb |
| Using Flickr API | MoyArt | 6,761 Kb |
| Objects | Bonzaipenguin | 2,616 Kb |
| Social.svg.min | Larsenwork | 13,849 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!