search

Home >Web Front-end >HTML Tutorial >CSS drawing Android Robot_html/css_WEB-ITnose

CSS drawing Android Robot_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 13:05:011291browse

Pinned article: "Pure CSS to create a silver MacBook Air (full version)" Previous article: "Canvas simulated particle system"

Author homepage: myvin
Blogger QQ: 851399101 (click QQ and blog Mainly initiates a temporary session)

Text

The Android Robot drawn with css is relatively simple, mainly using position, rotate and translate attributes. I won’t say it because it’s simple. First upload the renderings, then directly upload the code.

You can also click here to view the real-time renderings and code on codepen.

The effect is as follows:

[Rendering] (http://images.cnblogs.com/cnblogs_com/myvin/710118/o_robot android.png)

Code

HTML Markup

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>Android robot</title>	<link rel="stylesheet" href="./android.css"></head><body>	<div class="android">		<div class="head">			<div class="eyes"></div>		</div>		<div class="body">			<div class="arms"></div>		</div>	</div></body></html>

CSS Code

body{    background-color: #444444;    margin:0 auto;    padding:0 auto;}.android{    position: relative;    margin-top:210px;    margin-left:200px;    }.body{    position: absolute;    width: 336px;    height: 285px;    background: #00cc00;    border-radius: 0px 0px 40px 40px;}.body:before,.body:after{    content: '';    width: 75px;    height: 122px;    background: #00cc00;    position: absolute;    bottom: -122px;    border-radius:0px 0px 20px 20px;}.body:before{left:70px;}.body:after{right:70px;}.head{    width: 336px;    height:155px;    border-radius:300px 300px 0px 0px;    background: #00cc00;    position: absolute;    top: -175px;}.head:before,.head:after{    content:'';    width: 10px;    height: 53px;    background: #00cc00;    position: absolute;}.head:before{-webkit-transform:translate(60px,0px) rotate(-30deg);}.head:after{-webkit-transform:translate(276px,0px) rotate(30deg);}.eyes:before,.eyes:after{    content: '';    width: 27px;    height: 27px;    border-radius:27px 27px 27px 27px;    background: white;    position: absolute;}.eyes:before{left: 85px;top: 50px;}.eyes:after{right: 85px;top: 50px;}.arms:before,.arms:after{    content: '';    width: 75px;    height: 233px;    background: #00cc00;    border-radius: 75px 75px 75px 75px;    position: absolute;}.arms:before{left: -90px;}.arms:after{right:-90px;}


Please remember to indicate the author and source when reprinting -.-
Author: myvin
Original source:

Previous article: "Canvas Simulation Particle System" Top article: "Pure CSS to create a silver MacBook Air (full version)"

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS Magic Series: Pure CSS drawing graphics (bricks of various shapes)_html/css_WEB-ITnoseNext article：CSS Magic Series: Pure CSS drawing graphics (bricks of various shapes)_html/css_WEB-ITnose

Related articles

See more