Q-bert drawing w/ css animations

In this example below you will see how to do a Q-bert drawing w/ css animations with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mush_el, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mush_el ©
  • HTML
  • CSS
  • JavaScript
    Css drawing with some animations
<div class="block_container">
				    <div class="first_level">
				        <div class="top_block"><p>2.</p></div> 
				        <div class="left_block_arrow">
				        	<div class="moving_border_two"></div>
				        </div>
				        <a href="features.php">
				        	<div class="right_block">
				        		<h1>Feature Builder</h1>
				        	</div>
				        </a>
				    </div>
				    <div class="second_level_dbl">
				        <div class="top_dblblock">
				        	<div class="moving_border"></div>
				        </div> 
				        <div class="left_dblblock">
				           
				        </div>
				    </div>
				    <div class="second_level">
				        <a href="help.php">
				        	<div class="top_block">
				        		<h1>How Can We Help</h1>
				        	</div>
				        </a>
				        <div class="left_block">
				           <p>1.<div class="moving_border_three"></div></p>
				        </div>
				        <div class="right_block_arrow">
				        	<div class="moving_border_four"></div>
				        	
				       	</div>
				    </div>
				    <div class="second_level_two">
				        <div class="top_block_arrow"><div class="dashes-top skinny"></div></div> 
				        <a href="demo.php">
				        	<div class="left_block">
				         		<h1>Request A Demo<div class="dashes-left"></div></h1>
				       	 	</div>
				       	 </a>
				        <div class="right_block"><p>3.</p></div>
				    </div>
				    
				
				     <div class="third_level">
				        <div class="top_block"></div> 
				        <div class="left_block">
				           <p>+</p>
				        </div>
				        <a href="support.php">
				        	<div class="right_block">
				        		<h1>Training &amp; Support</h1>
				        	</div>
				        </a>
				    </div>
				    
				    <div class="third_level_two">
				        <div class="top_block"><div class="dashes-top"></div></div> 
				        <div class="left_block">
				           <p>+</p>
				        </div>
				        <a href="managed_services.php">
				        	<div class="right_block">
				        		<h1>Managed Services</h1>
				        	</div>
				        </a>
				    </div>
				    <div class="third_level_three">
				        <div class="top_block"><div class="dashes-top"></div></div> 
				        <div class="left_block_arrow_dwn"><div class="dashes-left shorty"></div>
				        </div>
				        <div class="right_block_mobile"></div>
				    </div>
				</div>

/*Downloaded from https://www.codeseek.co/mush_el/q-bert-drawing-with-css-animations-ogWpwp */
    html{
  font-family: 'Muli', sans-serif;
}

/* animation 3-d blocks */
.block_container {
    padding: 20px 0px 0px 100px;

}
.top_block {
    margin: 20px 0px -39px 27px;
    width: 130px;
    height: 130px;
    background: #0D72B9;
    -webkit-transform: scaleY(.58) rotate(-45deg);
    -moz-transform: scaleY(.58) rotate(-45deg);
    -ms-transform: scaleY(.58) rotate(-45deg);
    -o-transform: scaleY(.58) rotate(-45deg);
 	transform: scaleY(.58) rotate(-45deg);
}

.top_block_arrow {
    margin: 20px 0px -39px 27px;
    width: 130px;
    height: 130px;
    background: #0D72B9 url('../images/arrow_right.png') no-repeat;
    -webkit-transform: scaleY(.58) rotate(-45deg);
    -moz-transform: scaleY(.58) rotate(-45deg);
    -ms-transform: scaleY(.58) rotate(-45deg);
    -o-transform: scaleY(.58) rotate(-45deg);
    transform: scaleY(.58) rotate(-45deg);
    background-position: 35px 37px;
}

.left_block {
    width: 92px;
    height: 122px;
    background: #1E353F;
    -webkit-transform: skew(0deg, 30deg);
    -moz-transform: skew(0deg, 30deg);
    -ms-transform: skew(0deg, 30deg);
    -o-transform: skew(0deg, 30deg);
    transform: skew(0deg, 30deg);
    display: inline-block;
    vertical-align: middle;
}

.left_block_arrow {
    width: 92px;
    height: 122px;
    background: #1E353F url('../images/arrow_right.png') no-repeat;
    background-position: 14px 36px;
    -webkit-transform: skew(0deg, 30deg);
    -moz-transform: skew(0deg, 30deg);
    -ms-transform: skew(0deg, 30deg);
    -o-transform: skew(0deg, 30deg);
    transform: skew(0deg, 30deg);
    display: inline-block;
    vertical-align: middle;
}

.left_block_arrow_dwn {
    width: 92px;
    height: 122px;
    background: #1E353F url('../images/arrow_down.png') no-repeat;
    background-position: 11px 36px;
    -webkit-transform: skew(0deg, 30deg);
    -moz-transform: skew(0deg, 30deg);
    -ms-transform: skew(0deg, 30deg);
    -o-transform: skew(0deg, 30deg);
    transform: skew(0deg, 30deg);
    display: inline-block;
    vertical-align: middle;
}

.right_block {
    margin-left: -4px;
    width: 92px;
    height: 122px;
    background: #DC5B26;
    -webkit-transform: skew(0deg, 150deg);
    -moz-transform: skew(0deg, 150deg);
    -ms-transform: skew(0deg, 150deg);
    -o-transform: skew(0deg, 150deg);
    transform: skew(0deg, 150deg);
    display: inline-block;
    vertical-align: middle;
}

.right_block_arrow {
    margin-left: -4px;
    width: 92px;
    height: 122px;
    background: #DC5B26 url('../images/arrow_right.png') no-repeat;
    background-position: 14px 36px;
    -webkit-transform: skew(0deg, 150deg);
    -moz-transform: skew(0deg, 150deg);
    -ms-transform: skew(0deg, 150deg);
    -o-transform: skew(0deg, 150deg);
    transform: skew(0deg, 150deg);
    display: inline-block;
    vertical-align: middle;
}
.right_block_mobile:before
{
  content: "";
  display: inline-block;
  color: #fff;
  font-family: "font-awesome";
}
.right_block_mobile {
    margin-left: -4px;
    width: 92px;
    height: 122px;
    background: #DC5B26 url('../images/mobile.png') no-repeat;
    background-position: 33px 30px;
    -webkit-transform: skew(0deg, 150deg);
    -moz-transform: skew(0deg, 150deg);
    -ms-transform: skew(0deg, 150deg);
    -o-transform: skew(0deg, 150deg);
    transform: skew(0deg, 150deg);
    display: inline-block;
    vertical-align: middle;
}
.top_dblblock {
    margin: 20px 0px -104px 73px;
    width: 130px;
    height: 260px;
    background: #0D72B9;
    -webkit-transform: scaleY(.58) rotate(-45deg);
    -moz-transform: scaleY(.58) rotate(-45deg);
    -ms-transform: scaleY(.58) rotate(-45deg);
    -o-transform: scaleY(.58) rotate(-45deg);
 	transform: scaleY(.58) rotate(-45deg);
    
}
.left_dblblock {
    width: 184px;
    height: 122px;
    background: #1E353F;
    -webkit-transform: skew(0deg, 30deg);
    -moz-transform: skew(0deg, 30deg);
    -ms-transform: skew(0deg, 30deg);
    -o-transform: skew(0deg, 30deg);
    transform: skew(0deg, 30deg);
    display: inline-block;
    vertical-align: middle;
}

.block_container p {
    font-size: 55px;
    padding: 20px 0 0 0;
    margin:0px;
    text-align: center;
    color: #fff;
}
.block_container h1 {
    margin: 0px;
    font-size: 16px;
    color: #fff;
    text-transform: none;
    padding: 32px 7px 0px 10px;
    text-align: center;
}

.block_container .top_block h1 {
	font-size: 22px;
}

.first_level {
    margin: 0px 0px 0px 184px;
}
.second_level {
 margin: -274px 0px 0px 92px;
}
.second_level_two {
    margin: -233px 0px 0px 276px;
}
.second_level_dbl {
margin: -83px 0px 0px -92px;

}
.third_level {
    margin: -59px 0px 0px 0px;
}
.third_level_two {
    margin: -233px 0px 0px 184px;
}

.third_level_three {
    margin: -233px 0px 0px 368px;
}


.dashes-left {
	border-left: 3px dashed #fff;
	height: 114px;
	margin-left: 33px;
	margin-top: -72px;
}
.dashes-top {
	border-bottom: 4px dashed #fff;
	width: 130px;
	padding-top: 60px;
}

.skinny {
	width: 40px;
}

.shorty {
	height: 40px;
	margin-top: 0px;
	margin-left: 43px;
}
.moving_border {
	height: 220px;
	margin-left: 60px;
	border-left: 4px dashed #fff;
	-webkit-animation: dash 2s ease-in-out; 
	-moz-animation: dash 2s ease-in-out; 
	-ms-animation: dash 2s ease-in-out; 
	-o-animation: dash 2s ease-in-out; 
	animation: dash 2s ease-in-out; 
}
@-webkit-keyframes dash {
	0% { height: 0px;}
	100% {height: 220px;}
}
@-moz-keyframes dash {
	0% { height: 0px;}
	100% {height: 220px;}
}
@-ms-keyframes dash {
	0% { height: 0px;}
	100% {height: 220px;}
}
@-o-keyframes dash {
	0% { height: 0px;}
	100% {height: 220px;}
}
@keyframes dash {
	0% { height: 0px;}
	100% {height: 220px;}
}

.moving_border_two {
	width: 40px;
	margin-top: 60px;
	border-bottom: 3px dashed #fff;
	-webkit-animation: dashtwo 1s ease-in-out;
	-moz-animation: dashtwo 1s ease-in-out;
	-ms-animation: dashtwo 1s ease-in-out;
	-o-animation: dashtwo 1s ease-in-out;
	animation: dashtwo 1s ease-in-out;
}
@-webkit-keyframes dashtwo {
	0% { width: 0px;}
	100% {width: 40px;}
}

@-moz-keyframes dashtwo {
	0% { width: 0px;}
	100% {width: 40px;}
}
@-ms-keyframes dashtwo {
	0% { width: 0px;}
	100% {width: 40px;}
}
@-o-keyframes dashtwo {
	0% { width: 0px;}
	100% {width: 40px;}
}
@keyframes dashtwo {
	0% { width: 0px;}
	100% {width: 40px;}
}

.moving_border_three{
	width: 90px;
	margin-top: -28px;
	border-bottom: 3px dashed #fff;
	-webkit-animation: dashthree 4s ease-in-out; 
	-moz-animation: dashthree 4s ease-in-out; 
	-ms-animation: dashthree 4s ease-in-out; 
	-o-animation: dashthree 4s ease-in-out; 
	animation: dashthree 4s ease-in-out; 
}
@-webkit-keyframes dashthree {
	0% { width: 0px;}
	50% { width: 0px;}
	100% {width: 90px;}
}
@-moz-keyframes dashthree {
	0% { width: 0px;}
	50% { width: 0px;}
	100% {width: 90px;}
}
@-ms-keyframes dashthree {
	0% { width: 0px;}
	50% { width: 0px;}
	100% {width: 90px;}
}
@-o-keyframes dashthree {
	0% { width: 0px;}
	50% { width: 0px;}
	100% {width: 90px;}
}
@keyframes dashthree {
	0% { width: 0px;}
	50% { width: 0px;}
	100% {width: 90px;}
}
.moving_border_four {
	width: 20px;
	margin-top: 58px;
	border-bottom: 3px dashed #fff;
	-webkit-animation: dashfour 5.5s ease-in-out;
	-moz-animation: dashfour 5.5s ease-in-out;
	-ms-animation: dashfour 5.5s ease-in-out;
	-o-animation: dashfour 5.5s ease-in-out;
	animation: dashfour 5.5s ease-in-out; 
}
@-webkit-keyframes dashfour {
	0% { width: 0px;}
	66% { width: 0px;}
	100% {width: 40px;}
}
@-moz-keyframes dashfour {
	0% { width: 0px;}
	66% { width: 0px;}
	100% {width: 40px;}
}
@-ms-keyframes dashfour {
	0% { width: 0px;}
	66% { width: 0px;}
	100% {width: 40px;}
}
@-o-keyframes dashfour {
	0% { width: 0px;}
	66% { width: 0px;}
	100% {width: 40px;}
}
@keyframes dashfour {
	0% { width: 0px;}
	66% { width: 0px;}
	100% {width: 40px;}
}



/*Downloaded from https://www.codeseek.co/mush_el/q-bert-drawing-with-css-animations-ogWpwp */
    

Comments