溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么用css寫個android機器人”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用css寫個android機器人”吧！
代碼如下:
<span ></span><pre code_snippet_id="75788" snippet_file_name="blog_20131121_2_1289480" name="code" class="html"><pre code_snippet_id="75788" snippet_file_name="blog_20131121_2_1289480" name="code" class="html"><!DOCTYPE>
<html>
<head></head>
<style type="text/css">
.android{
position: absolute;
left: 500px;
top: 200px;
}
/* head */
.head{
width: 336px;
height: 155px;
background: #a5c63b;
border-radius: 200px 200px 0 0;
position: absolute;
top: -170px;
}
.head:before, .head:after{
background: #a5c63b;
content: '';
width: 10px;
height: 53px;
position: absolute;
top: -30px;
border-radius: 20px 20px 0 0;
}
.head:before{
-webkit-transform: translate(255px, 0px) rotate(30deg);
-moz-transform:translate(255px, 0px) rotate(30deg);
-o-transform:translate(255px, 0px) rotate(30deg);
}
.head:after{
-webkit-transform: translate(63px, 0px) rotate(-30deg);
-moz-transform: translate(63px, 0px) rotate(-30deg);
-o-transform: translate(63px, 0px) rotate(-30deg);
}
/* eyes */
.eyes:before, .eyes:after{
background: #fff;
content: '';
width: 27px;
height: 27px;
top: 68px;
position: absolute;
border-radius: 20px;
}
.eyes:before{
left: 78px;
}
.eyes:after{
right: 78px;
}
/* body */
.body{
width: 336px;
height: 285px;
background: #a5c63b;
border-radius: 0px 0px 30px 30px;
position: absolute;
}
.body:before, .body:after{
background: #a5c63b;
content: '';
width: 75px;
height: 122px;
bottom: -122px;
position: absolute;
border-radius: 0 0 50px 50px;
}
.body:before{
left: 68px;
}
.body:after{
right: 68px;
}
/* arms */
.arms:before, .arms:after{
background: #a5c63b;
content: '';
width: 75px;
height: 233px;
top:-8px;
position: absolute;
border-radius: 40px;
}
.arms:before{
left: -90px;
}
.arms:after{
right: -90px;
}
</style>
<body>
<div class="android">
<div class="head">
<div class="eyes"></div>
</div>
<div class="body">
<div class="arms"></div>
</div>
</div>
</body>
</html></pre>
<pre></pre>
<pre></pre>
<p></p>
<pre></pre>
<pre></pre>
<p></p>
<p>
</p>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
</pre>
感謝各位的閱讀，以上就是“怎么用css寫個android機器人”的內容了，經過本文的學習后，相信大家對怎么用css寫個android機器人這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
