Animating Mario in Pure CSS

Animating Mario in Pure CSS.markdown

Animating Mario in Pure CSS ('-' * 27) Its-a-me Mario!! Just felt like putting my css skills to the test and try something I've never really done before, found it pretty tricky and somethings can always be improve, like the "M" or even adding some shadows and highlights but not bad I reckon! Edit: Just made him talk!

Tags: Pure Only CSS Mario Animating

A Pen by Howes on CodePen.

License.

index.html

<div id="head">
	<div id="hat"></div>
  <div id="logo">
    <div id="m1"></div>
    <div id="m2"></div>
    <div id="m3"></div>
    <div id="m4"></div>
  </div>
  <div id="left-ear"></div>
  <div id="right-ear"></div>
	<div id="face"></div>
  <div id="moreface"></div>
  <div id="left-sideburn"></div>
  <div id="right-sideburn"></div>
  <div id="cheeks"></div>
  <div id="left-brow"></div>
  <div id="right-brow"></div>
  <div id="moustache">
		<span></span>
  	<span></span>
  	<span></span>
  	<span></span>
  	<span></span>
  	<span></span>
 	</div>
  <div id="left-eye"></div>
  <div id="right-eye"></div>
  <div id="nose"></div>
  <div id="mouth"></div>
  <div id="bubble">
  	<h3>Its-a-me Mario!</h3>
	</div>
</div>

<div id="credits">
  <h1>Pure CSS <span>Mario</span></h1>
  <p><strong>Created by: </strong><a href="https://twitter.com/aihowes">@aihowes</a><br/>
    <strong>Date:</strong> 04/06/2012<p>
    <p><strong>Description: </strong>
      Its-a-me Mario!! Just felt like putting my css skills to the test and try something I've never really done before, found it pretty tricky and somethings can always be improved, like the "M" or even adding some shadows and highlights but not bad I reckon! <a href="http://codepen.io/aihowes/pen/pure_css_toad/">Come visit Toad</a></p>

script.js

/*
PURE CSS MARIO
Created by Alexander Howes (aihowes)
Date: 04/06/2012

Description:
It'sa me Mario!! Just felt like putting my css skills to the test and try something I've never really done before, found it pretty tricky and somethings can always be improved, like the "M" or even adding some shadows and highlights but not bad I reckon!
*/

style.css

* {
	-webkit-transition: all 0.4s ease-in-out;
  -moz-transition:    all 0.4s ease-in-out;
  -o-transition:			all 0.4s ease-in-out;
  transition: 				all 0.4s ease-in-out;
}

#head {
  width: 240px;
  height: 300px;
  margin: 20px auto;
  border-radius: 150px;
  position: relative;
}

#hat {
  position: absolute;
  width: 270px;
  height: 200px;
  -webkit-border-radius: 50% 50% 100px 100px;
  -moz-border-radius: 50% 50% 100px 100px;
  -o-border-radius: 50% 50% 100px 100px;
	border-radius: 50% 50% 100px 100px;
  background: #f30015;
  left: -15px;
  top: -15px;
}

#face {
  border-top: solid 15px #9c0008;
  position: absolute;
  width: 230px;
  height: 90px;
  top: 100px;
  left: 5px;
  background: #ffcca4;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

#face:before {
  content: "";
  border-top: solid 15px #d60410;
  position: absolute;
  width: 200px;
  height: 68px;
  top: -23px;
  left: 15px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

#logo {
  position: absolute;
  width: 90px;
  height: 90px;
  background: #FFF;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  top: 25px;
  left: 50%;
  margin-left: -45px;
}

#m1 {  
  width: 10px;
  height: 50px;
  position: absolute;
  background: #f30015;
	top: 14px;
  left: 20px;
  -webkit-transform: skew(-35deg) rotate(-15deg);
  -moz-transform: skew(-35deg) rotate(-15deg);
  -o-transform: skew(-35deg) rotate(-15deg);
  transform: skew(-35deg) rotate(-15deg);
}

#m4 {  
  width: 10px;
  height: 50px;
  position: absolute;
  background: #f30015;
	top: 14px;
  right: 20px;
  -webkit-transform: skew(35deg) rotate(15deg);
  -moz-transform: skew(35deg) rotate(15deg);
  -o-transform: skew(35deg) rotate(15deg);
  transform: skew(35deg) rotate(15deg);
}

#m2 {  
  width: 10px;
  height: 30px;
  position: absolute;
  background: #f30015;
	top: 15px;
  left: 35px;
  -webkit-transform: skew(15deg);
  -moz-transform: skew(15deg);
  -o-transform: skew(15deg);
  transform: skew(15deg);
}

#m3 {  
  width: 10px;
  height: 30px;
  position: absolute;
  background: #f30015;
	top: 15px;
  left: 45px;
  -webkit-transform: skew(-15deg);
  -moz-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  transform: skew(-15deg);
}

#moreface {
  position: absolute;
  width: 230px;
  height: 160px;
  top: 150px;
  left: 5px;
  -webkit-border-radius: 0px 0px 200px 200px;
  -moz-border-radius: 0px 0px 200px 200px;
  -o-border-radius: 0px 0px 200px 200px;
  border-radius: 0px 0px 200px 200px;
  background: #ffcca4;
}

#left-sideburn {
  position: absolute;
  width: 15px;
  height: 50px;
  top: 134px;
  left: 5px;
  -webkit-border-radius: 60px 0px;
  -moz-border-radius: 60px 0px;
  -o-border-radius: 60px 0px;
  border-radius: 60px 0px;
  background: #552305;
}

#right-sideburn {
  position: absolute;
  width: 15px;
  height: 50px;
  top: 134px;
  right: 5px;
  -webkit-border-radius: 0px 60px;
  -moz-border-radius: 0px 60px;
  -o-border-radius: 0px 60px;
  border-radius: 0px 60px;
  background: #552305;
}

#left-ear{
  position: absolute;
  top: 138px;
  left: -28px;
  width: 60px;
  height: 80px;
  background: #ffcca4;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

#right-ear{
  position: absolute;
  top: 138px;
  right: -28px;
  width: 60px;
  height: 80px;
  background: #ffcca4;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

#cheeks {
  position: absolute;
  width: 150px;
  height: 100px;
  top: 210px;
  left: 50%;
  margin-left: -75px;
  background: #ffcca4;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
}

#cheeks:before {
  content: "";
  position: absolute;
  width: 150px;
  height: 120px;
  top: -50px;
  left: 30px;
  margin-left: -75px;
  background: #ffcca4;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
}

#cheeks:after {
  content: "";
  position: absolute;
  width: 150px;
  height: 120px;
  top: -50px;
  right: 30px;
  margin-right: -75px;
  background: #ffcca4;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
}

#nose {
  position: absolute;
  width: 90px;
  height: 70px;
  background: #ffcca4;
  background: -webkit-radial-gradient(30px 21px, circle farthest-side, #fffcce, #fdd4ac, #f8c49f, #dd9c7f);
  background: -moz-radial-gradient(30px 21px, circle farthest-side, #fffcce, #fdd4ac, #f8c49f, #dd9c7f);
  background: -o-radial-gradient(30px 21px, circle farthest-side, #fffcce, #fdd4ac, #f8c49f, #dd9c7f);
	background: radial-gradient(30px 21px, circle farthest-side, #fffcce, #fdd4ac, #f8c49f, #dd9c7f);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  top: 180px;
  left: 50%;
  margin-left: -45px;
}

#left-eye {
  position: absolute;
  top: 150px;
  width: 40px;
  height: 70px;
  background: #FFF;
  left: 25%;
  -webkit-border-radius: 40px 25px;
  -moz-border-radius: 40px 25px;
  -o-border-radius: 40px 25px;
  border-radius: 40px 25px;
}

#left-eye:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 50px;
  right: 0px;
  bottom: 10px;
  background: #4eefff;
  -webkit-border-radius: 40px 30px;
  -moz-border-radius: 40px 30px;
  -o-border-radius: 40px 30px;
  border-radius: 40px 30px;
}

#left-eye:after {
  content: "";
  position: absolute;
  width: 25px;
  height: 40px;
  right: 0px;
  bottom: 10px;
  background: #000;
  -webkit-border-radius: 40px 30px;
  -moz-border-radius: 40px 30px;
  -o-border-radius: 40px 30px;
  border-radius: 40px 30px;
}

#right-eye {
  position: absolute;
  top: 150px;
  width: 40px;
  height: 70px;
  background: #FFF;
  right: 25%;
  -webkit-border-radius: 25px 40px;
  -moz-border-radius: 25px 40px;
  -border-radius: 25px 40px;
  border-radius: 25px 40px;
}

#right-eye:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 50px;
  left: 0px;
  bottom: 10px;
  background: #4eefff;
  -webkit-border-radius: 30px 40px;
  -moz-border-radius: 30px 40px;
  -o-border-radius: 30px 40px;
  border-radius: 30px 40px;
}

#right-eye:after {
  content: "";
  position: absolute;
  width: 25px;
  height: 40px;
  left: 0px;
  bottom: 10px;
  background: #000;
  -webkit-border-radius: 30px 40px;
  -moz-border-radius: 30px 40px;
  -o-border-radius: 30px 40px;
  border-radius: 30px 40px;
}

#right-brow {
  position: absolute;
  background: #552305;
  right: 20%;
  top: 125px;
  width: 60px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
	border-radius: 50%;
  height: 50px;
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  transform: rotate(8deg);
}

#right-brow:after {
  content: "";
  position: absolute;
  width: 60px;
  height: 50px;
  top: 18px;
  right: 0px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background: #ffcca4;
}

#left-brow {
  position: absolute;
  background: #552305;
  left: 20%;
  top: 125px;
  width: 60px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  height: 50px;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  transform: rotate(-8deg);
}

#left-brow:after {
  content: "";
  position: absolute;
  width: 60px;
  height: 50px;
  top: 18px;
  left: 0px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background: #ffcca4;
}

#moustache:after {
  content: "";
  position: absolute;
  width: 180px;
  height: 50px;
  top: 176px;
  background: #ffcca4;
  left: 50%;
  margin-left: -90px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

#mouth {
  position: absolute;
  width: 70px;
  height: 20px;
  top: 255px;
  left: 50%;
  margin-left: -35px;
  border-bottom: 3px solid #bb7a61;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: talking 1s 4;
  -moz-animation: talking 1s 4;
  -o-animation: talking 1s 4;
  animation: talking 1s 4;
}

#moustache span {
  display: block;
  position: absolute;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background: #552305;
}

#moustache span:nth-child(1) { 
  width: 40px;
  height: 50px;
  top: 200px;
  left: 30px;
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  transform: rotate(-15deg);
}

#moustache span:nth-child(2) { 
  width: 40px;
  height: 50px;
  top: 210px;
  left: 60px;
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  transform: rotate(15deg);
}

#moustache span:nth-child(3) { 
  width: 42px;
  height: 50px;
  top: 213px;
  left: 86px;
}

#moustache span:nth-child(4) { 
  width: 42px;
  height: 50px;
  top: 212px;
  left: 118px;
}

#moustache span:nth-child(5) { 
  width: 42px;
  height: 50px;
  top: 206px;
  left: 145px;
}

#moustache span:nth-child(6) { 
  width: 40px;
  height: 50px;
  top: 204px;
  right: 30px;
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  transform: rotate(15deg);
}

#credits {
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
}

h1 {
  margin: 0;
}

h1 span, p strong {
  color: #f30015;
}

#bubble {
  position: absolute;
  padding: 15px;
  background: #f30015;
  left: -100px;
  top: 270px;
  color: white;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

#bubble:after{
	content: "";
	position: absolute;
	right: 0px;
  top: 10px;
	border-width: 29px 0 0 35px;
	border-style: solid;
	border-color: #f30015 transparent;
	display: block;
	width: 0;
}

@-webkit-keyframes talking {
		0%   { border-bottom: 3px solid #bb7a61; }
	 50%   { border-bottom: 20px solid #bb7a61; }
  100%   { border-bottom: 3px solid #bb7a61; }
}

@-moz-keyframes talking {
		0%   { border-bottom: 3px solid #bb7a61; }
	 50%   { border-bottom: 20px solid #bb7a61; }
  100%   { border-bottom: 3px solid #bb7a61; }
}

@-o-keyframes talking {
		0%   { border-bottom: 3px solid #bb7a61; }
	 50%   { border-bottom: 20px solid #bb7a61; }
  100%   { border-bottom: 3px solid #bb7a61; }
}

@keyframes talking {
		0%   { border-bottom: 3px solid #bb7a61; }
	 50%   { border-bottom: 20px solid #bb7a61; }
  100%   { border-bottom: 3px solid #bb7a61; }
}