您现在的位置:首页 >> 前端 >> 内容

css练手-android机器人

时间:2013/11/23 10:54:30 点击:

  核心提示:span style=font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: rgb(255, 25...
 
 
<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>  
    <p class="android">  
        <p class="head">  
            <p class="eyes"></p>  
        </p>  
        <p class="body">  
            <p class="arms"></p>  
        </p>  
    </p>  
</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>  

 

Tags:CS SS S练 练手 
作者:网络 来源:不详