纯css画表情

来源：互联网发布：android手机刷linux 编辑：程序博客网时间：2024/06/10 06:25
纯css画表情

前端的伙伴们通常提到画，会想到canvas。很多人致力于用css画图，今天用css画个One兔的形象，其中包括不规则椭圆，圆角三角形，非常有趣哦：
纯cssOne兔形象
代码块

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>表情</title>        <style type="text/css">            .wrap {                width: 400px;                height: 400px;                border: 1px solid #000000;                margin: auto;                overflow: hidden;                position: relative;            }            .Body {                position: absolute;                top: 190px;                left: 75px;                width: 250px;                height: 250px;                background: #000;                display: block;                border-radius: 30% 30% 20% 20% / 30% 30% 60% 60%;            }            .face {                width: 210px;                height: 150px;                background: linen;                border-radius: 30% 30% 30% 30% / 50% 50% 40% 40%;                position: absolute;                top: 35px;                left: 20px;            }            .eye {                width: 65px;                height: 10px;                background: black;                border-radius: 10px;                position: absolute;                top: 40px;            }            #lefteye {                left: 15px;            }            #righteye {                left: 130px;            }            /*红脸蛋*/            .saihong {                width: 55px;                height: 3px;                box-shadow: 0 0 20px 15px #ff7d7e;                border-radius: 100%;                background: #ff7d7e;                position: absolute;                top: 75px;            }            #leftsh {                left: 15px;            }            #rightsh {                left: 140px;            }            /*鼻子*/            .nose{                width: 22px;                height: 22px;                background: black;                border-radius: 30% 30% 50% 50%/ 30% 30% 75% 75%;                position: absolute;                top: 60px;                left: 95px;            }            /*嘴*/            .zui{                width:0px;                height: 50px;                border-right: 20px solid transparent;                border-left:20px solid transparent;                border-top:50px solid red;                border-bottom:0px solid transparent;                position: absolute;                top: 95px;                left: 85px;            }            .leftear{                position: absolute;                top: 70px;                left: 40px;                width: 70px;                height: 150px;                background: #000;                display: block;                border-radius: 50% 50% 30% 30% / 30% 30% 70% 70%;                -webkit-transform: rotate(-30deg);                -moz-transform: rotate(-30deg);                -ms-transform: rotate(-30deg);                -o-transform: rotate(-30deg);                transform: rotate(-30deg);            }            .lefte{                position: absolute;                top: 50px;                left: 17.5px;                width: 35px;                height: 80px;                background: #fff;                display: block;                border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;            }            .leftea{                position: absolute;                top: 45px;                left: 15px;                width: 5px;                height: 20px;                background: #ffbdbe;                box-shadow: 0 0 10px 10px #ffbdbe;                display: block;                border-radius: 50% 50% 50% 50% / 30% 30% 90% 90%;            }            .rightear{                position: absolute;                top: 70px;                left: 290px;                width: 70px;                height: 150px;                background: #000;                display: block;                border-radius: 50% 50% 30% 30% / 30% 30% 70% 70%;                -webkit-transform: rotate(30deg);                -moz-transform: rotate(30deg);                -ms-transform: rotate(30deg);                -o-transform: rotate(30deg);                transform: rotate(30deg);            }            .righte{                position: absolute;                top: 50px;                left: 17.5px;                width: 35px;                height: 80px;                background: #fff;                display: block;                border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;            }            .rightea{                position: absolute;                top: 45px;                left: 15px;                width: 5px;                height: 20px;                background: #ffbdbe;                box-shadow: 0 0 10px 10px #ffbdbe;                display: block;                border-radius: 50% 50% 50% 50% / 30% 30% 90% 90%;            }            .dong{                width: 25px;                height: 25px;                background: white;                position: absolute;                top: 45px;                right: -10px;                border-radius: 50%;            }        </style>    </head>    <body>        <div class="wrap">            <!--左耳朵-->            <div class="leftear">                <!--left耳朵-->                <div class="lefte">                    <div class="leftea">                    </div>                </div>            </div>            <!--右耳朵-->            <div class="rightear">                <!--right耳朵-->                <div class="righte">                    <div class="rightea">                    </div>                </div>                <div class="dong">                </div>            </div>            <!--身子-->            <div class="Body">                <!--脸-->                <div class="face">                    <!--眼睛-->                    <div class="eye" id="lefteye"></div>                    <div class="eye" id="righteye"></div>                    <!--腮红-->                    <div class="saihong" id="leftsh"></div>                    <div class="saihong" id="rightsh"></div>                    <!--鼻子-->                    <div class="nose">                            <div class="nose1">                            </div>                            <!--<div class="nose2">                            </div>-->                    </div>                    <!--嘴-->                    <div class="zui">                    </div>                </div>            </div>        </div>    </body></html>
重点

这幅图主要把握好 border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;各个参数的含义
border-radius参数： 横向圆角r1（左上右上右下左下） / 纵向圆角r2（左上右上右下左下）
通过对圆角上下半径的控制从而控制其弧度的改变
示意图

这里写图片描述
阅读全文
0 0