css练手-android机器人

当前位置 : 首页 > 网页制作 > CSS > css练手-android机器人

css练手-android机器人

来源: 作者: 时间:2016-01-28 09:27
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=""><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>  

 

Tag:
上一篇:DIV + CSS 布局入门
下一篇:密码强度检测
网友评论

<