CSS3之安卓小头像制作

最新推荐文章于 2022-08-01 12:55:22 发布

风筝风筝等等我

最新推荐文章于 2022-08-01 12:55:22 发布

阅读量222

点赞数 2

文章标签： CSS3

本文链接：https://blog.csdn.net/a1k2l45k/article/details/80816968

版权

背景

我们在生活中可以常常看到安卓的小头像，现在我们可以用CSS3来制作一个安卓标志。

知识点

对border-radius的使用

详细代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;              
            }
            body{
                background-color:#ccc;
                opacity: 0.6;
            }
            .items{
                width: 500px;
                height: 600px;
                background-color: white;
                margin: 100px auto;
                overflow: hidden;
                position: relative;
            }
            .tou{
                width: 220px;
                height: 100px;
                background-color: lawngreen;
                margin: 20px auto 5px;
                border-top-left-radius: 90px 100px;
                border-top-right-radius: 90px 100px;
                position: relative;
            }
            .tou div{
                width: 20px;
                height: 20px;
                background-color: white;
                border-radius: 50%;
                border: 1px solid #ccc;
                position: absolute;
            }
            .tou .eye1{         
                left: 50px;
                top: 50px;
            }
            .tou .eye2{         
                left: 140px;
                top: 50px;
            }
            .body{
                width: 220px;
                height: 200px;
                background-color: lawngreen;
                margin: 0px auto;

            }
            .arms .arm1{
                width: 50px;
                height: 150px;
                background-color: lawngreen;
                position: absolute;
                left: 82px;
                top: 162px;
                border-radius: 25px;
            }
            .usually{
                width: 50px;
                height: 150px;
                background-color: lawngreen;
                position: absolute;
                border-radius: 25px;
            }
            .arms .arm2{
                right: 82px;
                top: 162px; 
            }
            .foot .foot1{           
                right: 165px;
                bottom: 160px;          
            }
            .foot .foot2{       
                right: 280px;
                bottom: 160px;  
            }
        </style>
    </head>
    <body>
        <div class="items">
            <div class="tou">
                <div class="eye1"></div>
                <div class="eye2"></div>
            </div>
            <div class="body"></div>
            <div class="arms">
                <div class="arm1 usually"></div>
                <div class="arm2 usually"></div>
            </div>
            <div class="foot">          
                <div class="foot1 usually"></div>
                <div class="foot2 usually"></div>
            </div>
        </div>
    </body>
</html>