css练手-android机器人 - html/css语言栏目：html.css-自学php网

css练手-android机器人 - html/css语言栏目：html.css

来源：自学PHP网时间：2015-04-14 14:51 作者：阅读:次

[导读] span style=font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: rgb(255, 255, 255);好像最近忙课设，不怎么写前端代码了。所以特意写点css练练手，自己好歹也用...

 
 
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: rgb(255, 255, 255);">好像最近忙课设，不怎么写前端代码了。所以特意写点css练练手，自己好歹也用android两三年，干脆写个机器人吧，博客排版出错了，大家将就着吧，不知道怎么改啊</span>

<span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: rgb(255, 255, 255);"></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><br>  
<br>  
<pre></pre>  
<pre></pre>  
<p></p>  
<pre></pre>  
<pre></pre>  
<p></p>  
<p><br>  
</p>  
<pre></pre>  
<pre></pre>  
<pre></pre>  
<pre></pre>  
  
</pre>

Southeastern Europe 2004 - html/css语言栏目：html.css - 自

密码强度检测 - html/css语言栏目：html.css - 自学

子栏目

css练手-android机器人 - html/css语言栏目：html.css

最新评论

添加评论

更多文章推荐

添加评论