前一段时间在网上看到了有高手利用CSS绘制了一个小猪佩奇,这几天正好我自己也在学习HTML5和CSS3,所以决定也用CSS画几个图。

第一次用CSS画图,先从简单的开始,首先画了一颗树,这里暂时将代码贴在下面,后续会进行截图传到博客上哦。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Widow-target" Content="_top">
        <title>树</title>
        <style>
            body{
                margin:50px;
            }
            div{
                margin: auto;
            }
            .t{
                width:0;
                border: solid transparent;
                border-top-style: none;
            }
            .t1{

                border-width:35px;
                border-bottom-color:#00d900;
            }
            .t2{

                border-width:75px;
                border-bottom-color:#13d86f;
                margin-top:-10px;
            }
            .t3{

                border-width:110px;
                border-bottom-color:#006722;
                margin-top:-30px;
            }
            .s1{
                width:23px;
                height:150px;
                background-color:#02b436;
            }
            .s2{
                box-sizing:border-box;
                width:165px;
                height:92px;
                background-color:rgba(190,255,255,0.8);
                border-width:34px 8px 24px;
                border-style:solid;
                border-color:rgba(182,255,255,0.5) #ba6259 #be6157 #bc6256;
                margin-top:-43px;
            }
        </style>
    </head>
    <body>
        <div class="t t1"></div>
        <div class="t t2"></div>
        <div class="t t3"></div>
        <div class="s1"></div>
        <div class="s2"></div>
    </body>
</html>

作为一个初学者,做成这个样子已经很兴奋啦,不过还是想挑战一下更复杂一点的,于是选择了一个图形相对规则的哆啦A梦。这里将代码贴在下面,后续会传截图哦。


<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Widow-target" Content="_top">
        <title>机器猫</title>
        <style>
            body{margin:0;}
            .head{
                width:475px;
                height:437px;
                background-color:#039ce3;
                border-radius:50%;
                box-sizing: border-box;
                border:#000 solid 3px;
                overflow:hidden;
            }
            .head .main{
                height:360px;
                width:440px;
                background-color:#fff;
                border-radius:50%;
                box-sizing: border-box;
                border:#000 solid 3px;
                margin:72px auto 0;
            }
            .head .main .eye{
                height:124px;
                width:100px;
                background-color: #fff;
                box-sizing:border-box;
                border:#000 solid 3px;
                border-radius: 50%;
            }
            .head .main .eye-left{
                margin: -40px auto auto 117px;
            }
            .head .main .eye .eyeball{
                width:32px;
                height:44px;
                background-color:#000;
                border-radius:50%;
            }
            .head .main .eye-left .eyeball{
                margin: 47px auto auto 51px;
            }
            .head .main .eye-right .eyeball{
                margin: 47px auto auto 10px;
            }
            .head .main .eye-right{
                margin: -124px auto auto 216px;
            }
            .head .main .nose{
                height:64px;
                width:64px;
                background-color: #e10210;
                box-sizing:border-box;
                border:#000 solid 3px;
                border-radius: 50%;
                margin: -30px auto 0;
            }
            .head .main .nose .white-dot{
                height:20px;
                width:20px;
                background-color: #fff;
                border-radius: 50%;
                margin: 10px auto auto 10px;
            }
            .head .main .ver-line{
                height:170px;
                width:3px;
                background-color: #000;
                margin: auto;
            }
            .head .main .mouse{
                height:280px;
                width:310px;
                background-color: transparent;
                box-sizing:border-box;
                border-bottom:#000 solid 3px;
                border-radius: 50%;
                margin: -280px auto 0;
            }
            .head .main .bread{
                height:3px;
                width:130px;
                background-color: #000;
            }
            .head .main .beard-left-middle{
                margin: -120px auto auto 25px;
            }
            .head .main .beard-left-top{
                margin: -50px auto auto 25px;
                transform:rotate(15deg);
            }
            .head .main .beard-left-bottom{
                margin: 95px auto auto 30px;
                transform:rotate(-15deg);
            }
            .head .main .beard-right-middle{
                margin: -54px auto auto 267px;
            }
            .head .main .beard-right-top{
                margin: -50px auto auto 264px;
                transform:rotate(-15deg);
            }
            .head .main .beard-right-bottom{
                margin: 91px auto auto 263px;
                transform:rotate(15deg);
            }
        </style>
    </head>
    <body>
        <div class="head">
            <div class="main">
                <div class="eye-left eye">
                    <div class="eyeball"></div>
                </div>
                <div class="eye-right eye">
                    <div class="eyeball"></div>
                </div>
                <div class="nose">
                    <div class="white-dot"></div>
                </div>
                <div class="ver-line"></div>
                <div class="mouse"></div>
                <div class="beard-left-middle bread"></div>
                <div class="beard-left-top bread"></div>
                <div class="beard-left-bottom bread"></div>
                <div class="beard-right-middle bread"></div>
                <div class="beard-right-top bread"></div>
                <div class="beard-right-bottom bread"></div>
            </div>
        </div>
    </body>
</html>

哈哈,看到这个图,突然很开心,这个图目前还只画了一个头,后续如果有机会会进行补全的哦。如果有高手看到这篇文章,请轻喷~~

分类: 未分类

2 条评论

BG2KSI · 2019年9月29日 09:14

第一次听说这种图,它与PNG相比,有什么优点吗?似乎图形都是代码定义的,就有点像LaTeX编辑的数学公式一样

    Rivalsa · 2019年10月14日 22:44

    用这种图可以节省请求数量,节约资源加载时间,但这种情况只适合于小型简单的图片,比如小三角号之类的。对于复杂图片(比如上面文章中的图)在真正开发中还是推荐利用图片引入的。
    这里做的这些图片只是为了训练CSS技能。

发表评论

电子邮件地址不会被公开。