Android Logo with HTML and CSS
How do I make an android logo with html and css?
The Android logo made with HTML and CSS with some cool hover action and love :). What is a android logo with html and css? How do you make a android logo with html and css? This script and codes were developed by Diego Ponce on 21 November 2022, Monday.
Android Logo with HTML and CSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Android Logo with HTML and CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="android"> <div class="head"> <div class="left_ant"></div> <div class="right_ant"></div> <div class="left_eye"></div> <div class="right_eye"></div> </div> <div class="body"> <div class="left_arm"></div> <div class="right_arm"></div> <div class="left_leg"></div> <div class="right_leg"></div> </div>
</div>
</body>
</html>
Android Logo with HTML and CSS - Script Codes CSS Codes
*{ background:#393A3A;
}
div {margin: 0 auto; padding: 0;}
div div {background: #A4CA39; position: relative;}
.android{ height: 404px; width: 334px; margin: 20px 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.1s ease-in;
}
.left_eye, .right_eye { background: #393A3A; width: 20px; height: 20px; position: absolute; top: 42px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}
.left_eye {left: 50px;}
.right_eye {right: 50px;}
.left_ant, .right_ant{ width: 6px; height: 50px; position: absolute; top: -34px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
}
.left_ant { left: 50px; transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg);
}
.right_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;
}
.left_arm, .right_arm, .left_leg, .right_leg { width: 50px; position: absolute; -webkit-transition: all 0.1s ease-in;
}
.left_arm, .right_arm { height: 150px; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px;
}
.left_leg, .right_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;
}
.left_arm {left: -58px;}
.right_arm {right: -58px;}
.left_leg {left: 45px;}
.right_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);
}
.left_arm:hover{ -webkit-transform: rotate(15deg) translate(-14px, 0); -transform: rotate(15deg) translate(-14px, 0); -moz-transform: rotate(15deg) translate(-14px, 0);
}
.right_arm:hover{ -webkit-transform: rotate(-30deg) translate(30px, 0); -transform: rotate(-30deg) translate(30px, 0); -moz-transform: rotate(-30deg) translate(30px, 0);
}
Developer | Diego Ponce |
Username | wifi |
Uploaded | November 21, 2022 |
Rating | 3 |
Size | 2,000 Kb |
Views | 18,216 |
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!
Name | Size |
CSS image filters | 2,077 Kb |
Morphing animation | 2,134 Kb |
Grid animation | 2,663 Kb |
Basic AngularJS app | 2,069 Kb |
Birthday message | 4,285 Kb |
Slide from top | 2,242 Kb |
Animated text fill | 1,910 Kb |
Babylon.js animation | 2,128 Kb |
Animated text dots | 1,867 Kb |
Days until Christmas | 2,056 Kb |
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!
Name | Username | Size |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
Angular Route | Arun_v606 | 1,837 Kb |
Getting Started | Viblast | 1,500 Kb |
JQuery exercise | Brian-baum | 3,780 Kb |
Lightning | Akm2 | 19,150 Kb |
Rainbow Drops | Csbarnes | 2,365 Kb |
TweenMax transformOrigin Bubble | Nicolund | 2,209 Kb |
Scroll using CSS | Casperovic | 2,159 Kb |
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!