纯css画表情

最新推荐文章于 2024-04-17 16:35:21 发布

h5女汉纸

最新推荐文章于 2024-04-17 16:35:21 发布

阅读量797

点赞数

分类专栏： css3 文章标签： css 纯css画图前端圆角三角形

本文链接：https://blog.csdn.net/DYShiningLife/article/details/72822404

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

纯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（左上右上右下左下）
通过对圆角上下半径的控制从而控制其弧度的改变

示意图

这里写图片描述

h5女汉纸

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
纯css画表情

纯css画表情前端的伙伴们通常提到画，会想到canvas。很多人致力于用css画图，今天用css画个One兔的形象，其中包括不规则椭圆，圆角三角形，非常有趣哦：代码块<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表情</title> <style type="text/cs
复制链接

扫一扫

专栏目录