Animated Android Logo

Developer
Joe Warren
Size
1,988 Kb
Views
54,648
  1. Animated Android Logo Previews
  2. Animated Android Logo HTML Codes
  3. Animated Android Logo CSS Codes

How do I make an animated android logo?

What is a animated android logo? How do you make a animated android logo? This script and codes were developed by Joe Warren on 04 July 2022, Monday.

Animated Android Logo Previews
IQ Test

Animated Android Logo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Android Logo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head>	<title>Android Logo</title>	<link rel="stylesheet" type="text/css" href="android.css">
</head>
<body>	<div class="android">	<div class="head">	<div class="l_ant"></div>	<div class="r_ant"></div>	<div class="l_eye"></div>	<div class="r_eye"></div>	</div>	<div class="body">	<div class="l_arm"></div>	<div class="r_arm"></div>	<div class="l_leg"></div>	<div class="r_leg"></div>	</div>	</div>
</body>
</html>
</body>
</html>

Animated Android Logo - Script Codes CSS Codes

/* Code along with The Code Player */
div {margin: o; padding: 0;}
div div {background: #A4CA39; position: relative;}
.android {	height: 404px; width: 334px;	margin: 100px auto;
}
.head {	width: 220px; height: 100px;	top: 32px;	border-radius: 110px 110px 0 0;	-moz-border-radius: 110px 110px 0 0;	-webkit-border-radius: 110px 110px 0 0;	-webkit-transition: all 0.1 ease-in;
}
.l_eye, .r_eye {	background: #fff;	width: 20px; height: 20px;	position: absolute; top: 42px;	border-radius: 10px;	-moz-border-radius: 10px; -webkit-border-radius: 10px;
}
.l_eye {left: 50px;}
.r_eye {right: 50px;}
.l_ant, .r_ant {	width: 6px; height: 50px;	position: absolute; top: -34px;	border-radius: 3px;	-webkit-border-radius:3px;	-moz-border-radius: 3px;
}
.l_ant {	left: 50px;	transform: rotate(-30deg);	-webkit-transform: rotate(-30deg);	-moz-transform: rotate(-30deg);
}
.r_ant {	right: 50px;	transform: rotate(30deg);	-webkit-transform: rotate(30deg);	-moz-transform: rotate(30deg);
}
.body{	width: 220px; height: 184px;	top: 40px;	border-radius: 0 0 25px 25px;	-webkit-border-radius: 0 0 25px 25px;	-moz-border-radius: 0 0 25px 25px;
}
.l_arm, .r_arm, .l_leg, .r_leg {	width: 50px; position: absolute;	-webkit-transition: all 0.1s ease-in;
}
.l_arm, .r_arm {	height: 150px;	border-radius: 25px;	-moz-border-radius: 25px;	-webkit-border-radius: 25px;
}
.l_leg, .r_leg {	height: 80px; top: 182px;	border-radius: 0 0 25px 25px;	-moz-border-radius: 0 0 25px 25px;	-webkit-border-radius: 0 0 25px 25px;
}
.l_arm {left: -58px;}
.r_arm {right: -58px;}
.l_leg {left: 45px;}
.r_leg {right: 45px;}
.head:hover {	-webkit-transform: rotate(-5deg) translate(-4px, -8px);	-transform: rotate(-5deg) translate(-4px, -8px);	-moz-transform: rotate(-5deg) translate(-4px, -8px);
}
.l_arm:hover{	-webkit-transform: rotate(15deg) translate(-14px, 0);	-transform: rotate(15deg) translate(-14px, 0);	-moz-transform: rotate(15deg) translate(-14px, 0);
}
.r_arm:hover{	-webkit-transform: rotate(-30deg) translate(30px, 0);	-transform: rotate(-30deg) translate(30px, 0);	-moz-transform: rotate(-30deg) translate(30px, 0);
}
Animated Android Logo - Script Codes
Animated Android Logo - Script Codes
Home Page Home
Developer Joe Warren
Username MightyJoeW
Uploaded July 04, 2022
Rating 3
Size 1,988 Kb
Views 54,648
Do you need developer help for Animated Android Logo?

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!

Joe Warren (MightyJoeW) Script Codes
Name
The Heart
Javascript Guide
First Gen Pokemon Chart
Google Homepage 2
Matrix Blue Rain
JS and the DOM
JS Shananigans
Joe Warren Portfolio Deluxe
A Pen by Joe Warren
MLK Google Homepage project
Create amazing SEO 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!