Animated CSS3 mail mascot

Developer
Chris
Size
2,258 Kb
Views
32,384
  1. Animated CSS3 mail mascot Previews
  2. Animated CSS3 mail mascot HTML Codes
  3. Animated CSS3 mail mascot CSS Codes
  4. Animated CSS3 mail mascot JS Codes

How do I make an animated css3 mail mascot?

A crude version of the animation based on http://drbl.in/oxtr. What is a animated css3 mail mascot? How do you make a animated css3 mail mascot? This script and codes were developed by Chris on 21 August 2022, Sunday.

Animated CSS3 mail mascot Previews
IQ Test

Animated CSS3 mail mascot - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated CSS3 mail mascot</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="top-envo"></div>
<div class="main-message"></div>
<div class="bg-message-one"></div>
<div class="bg-message-two"></div>
<div class="front-msg"></div>
<div class="bar"></div> <script src="js/index.js"></script>
</body>
</html>

Animated CSS3 mail mascot - Script Codes CSS Codes

body { background: #d4ecf8;
}
.main-message { background: url(http://chrisyoong.com/codepen/envolope.svg); width: 379px; height: 249px; background-repeat: no-repeat; margin-left: 200px; z-index: 5; position: relative; margin-top: 200px; -webkit-animation: letterani 0.5s 1 linear; -webkit-animation-delay: 1.5s;
}
@-webkit-keyframes letterani { 0% { margin-top: 200px; } 45% { margin-top: 300px; } 50% { margin-top: 294px; } 100% { margin-top: 200px; }
}
.bg-message-two { background: url(http://chrisyoong.com/codepen/bg-msg.svg); width: 238px; height: 127px; background-repeat: no-repeat; left: 222px; top: -420px; z-index: 2; position: relative; -webkit-animation: message-bg-left 1.5s 1 ease-in-out; -webkit-animation-delay: 1.8s;
}
@-webkit-keyframes message-bg-left { 0% { left: 222px; top: -420px; } 50% { left: 222px; top: -306px; }
}
.bg-message-one { background: url(http://chrisyoong.com/codepen/bg-msg.svg); width: 238px; height: 127px; background-repeat: no-repeat; left: 322px; top: -305px; z-index: 3; position: relative; -webkit-animation: message-bg-right 1.5s 1 ease-in-out; -webkit-animation-delay: 1.9s;
}
@-webkit-keyframes message-bg-right { 0% { left: 322px; top: -305px; } 50% { left: 322px; top: -206px; }
}
.front-msg { background: url(http://chrisyoong.com/codepen/msg.svg) #FFF; width: 261px; height: 252px; background-repeat: no-repeat; float: left; top: -600px; left: 260px; z-index: 4; position: relative; -webkit-animation: front 2s 1 ease-in-out; -webkit-animation-delay: 1.6s;
}
@-webkit-keyframes front { 0% { top: -650px; left: 260px; height: 212px; } 10% { top: -655px; left: 260px; height: 312px; } 50% { top: -400px; left: 260px; overflow: hidden; height: 100px; } 80% { top: -450px; height: 100px; overflow: hidden; } 100% { top: -650px; left: 260px; overflow: visible; }
}
.top-envo { background: url(http://chrisyoong.com/codepen/top-envo.svg); width: 380px; height: 125px; background-repeat: no-repeat; float: left; top: -123px; z-index: 2; position: relative; left: 199px; transform: rotateZ(180deg); -webkit-animation: top-envolope 1s 1 ease-in-out; -webkit-animation-delay: 2s; background-position: 0px -7px;
}
@-webkit-keyframes top-envolope { 0% { -webkit-transform: scaley(0); transform: rotatex(180deg); height: 115px; } 50% { -webkit-transform: scaley(-1); transform: rotatex(0deg); transform-origin: center center; top: 4px; height: 125px; background-position: 0px 0px; z-index: 6; } 100% { -webkit-transform: scaley(0); transform: rotatex(180deg); }
}
.bar { width: 500px; height: 10px; background: #cbe3f1; position: absolute; top: 550px; left: 140px;
}

Animated CSS3 mail mascot - Script Codes JS Codes

/*inspired by http://drbl.in/oxtr*/
Animated CSS3 mail mascot - Script Codes
Animated CSS3 mail mascot - Script Codes
Home Page Home
Developer Chris
Username onlinechris
Uploaded August 21, 2022
Rating 4.5
Size 2,258 Kb
Views 32,384
Do you need developer help for Animated CSS3 mail mascot?

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!

Chris (onlinechris) Script Codes
Name
Calendar Animation 2
Animated Hamburger Menu Icon with Material Design Open Transition
Calendar Animation
Menu icon, animated upon open and close.
Play to Pause, material design style
Twitter SVG icon
SVG food icons
Responsive Style Menu for HTML e-mail
IPhone5S SVG Space Grey
Animated CSS3 gradient button for e-mail
Create amazing Facebook ads 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!