CSS绘制Android Robot_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS绘制Android Robot_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-06-24 13:05:01

オリジナル

1317 人が閲覧しました

固定された記事: 「シルバーの MacBook Air を作成するための純粋な CSS (完全版)」前の記事: 「キャンバスでシミュレートされたパーティクルシステム」

著者のホームページ: myvin
ブロガー QQ: 851399101 (ブロガーとの一時的なセッションを開始するには、QQ をクリックしてください)

テキスト

CSS で描画された Android ロボットは比較的単純で、主に位置、回転、移動の属性を使用します。簡単なので言いません。まずレンダリングをアップロードしてから、コードを直接アップロードします。

ここをクリックしてリアルタイムレンダリングと codepen のコードを表示することもできます。

効果は次のとおりです:

[レンダリング](http://images.cnblogs.com/cnblogs_com/myvin/710118/o_robot%20android.png)

コード

HTML マークアップ

<!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 コード

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;}

ログイン後にコピー

転載する場合は必ず著者と出典を明記してください -.-
著者: myvin
出典:

前の記事: 「キャンバスシミュレーションパーティクルシステム」固定記事: 「シルバーの MacBook Air を作成するための Pure CSS (完全版)」 )」