css3绘制机器人

最新推荐文章于 2024-10-30 11:54:06 发布

沐梓沐囡

最新推荐文章于 2024-10-30 11:54:06 发布

阅读量888

点赞数

文章标签： css3

本文链接：https://blog.youkuaiyun.com/yy_9_aa/article/details/78218972

版权

想不想用纯代码来绘制图形，而且不使用h5的cavans,zz只用css3，下面我来示范下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style   type="text/css">
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }
        .board {
            width: 600px;
            height: 440px;
            margin: 80px auto;
            background-color:gainsboro;
        }
        .android {
            width: 340px;
            padding-top: 40px;
            margin: 0 auto;
            position: relative;
        }
        /*脑袋*/
        .head{
            width: 220px;
            height: 100px;
            background-color:red;
            margin: 0 auto 10px;
            position: relative;
            border-radius: 100px 100px 0 0;
        }
        .head::before,
        .head::after{
            content: '';
            width: 20px;
            height: 20px;
            display: block;

            border-radius: 10px;
            position: absolute;
            top: 40px;

        }
        /*左眼*/
        .head::before {
            left: 50px;
            background-color:black;
        }
         /*右眼*/
        .head::after {
            right: 50px;
            background-color:black;
        }

        .body{
            width: 230px;
            height: 180px;
            margin: 0 auto;
            background-color:pink;
            border-radius: 0 0 25px 25px;
            position: relative;
        }
            /*腿*/
        .body:before,.body:after{
            content: '';
            width: 50px;
            height: 80px;
            display: block;
            background-color: #FFF;
            border-radius: 10px;
            position: absolute;
           bottom: -80px;

        }
        /*胳膊*/
        .arms{
            width: 340px;
            height: 150px;
            position: absolute;
            top: 150px;
        }
        .arms::before,
        .arms::after {
            content: '';
            display: block;
            width: 50px;
            height: 150px;

            border-radius: 25px;
            position: absolute;
        }
        .arms::before{
            left: 0;
            background-color: black;
        }
        .arms::after{
            right: 0;
            background-color:black;
        }
        .body::before {
            left: 40px;
            background-color:orangered;
        }

        .body::after {
            right: 40px;
            background-color:orangered;
        }
        p{
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            text-shadow: -3px -3px 1px #fff,3px 3px 1px #000 ;
        }
    </style>
</head>
<body>
   <div   class="board">
       <div class="android">
           <div  class="head"></div>
           <div  class="body"><p>机器人</p></div>
           <div class="arms"></div>

       </div>
   </div>
</body>
</html>

效果图: