CSS每周一练:鼠

作者: 0清婉0 | 来源:发表于2021-02-21 11:22 被阅读0次

看网上制作的小老鼠都要套好多div,我将这几天学习的知识结合了一下,用伪元素制作了一只小老鼠的头部,省却了很多代码。

<div class="mouse">

    <div class="head">

        <div class="ears"></div>

        <div class="eyes"></div>

        <div class="nose"></div>

        <div class="beard"></div>

        <div class="teeth"></div>

    </div>

</div>

head头、ear耳朵、eye眼睛、nose鼻子、beard胡子、teeth牙

body{font-size: 10px;background:teal;margin:10em;}

.mouse{

    width: 7em;

    height: 9em;

    font-size: 30px;

    position: relative;

    color:#8F9595;

}

.mouse *::before,

.mouse *::after{

    content:'';

    position: absolute;

}

.mouse .head{

    position: absolute;

    width: 6em;

    height: 6em;

    background-color: currentColor;

    border-radius: 50%;

    right: 0;

}

.mouse .ears::before,

.mouse .ears::after{

    width: 2.5em;

    height: 2.5em;

    background-color: #E5A95F;

    border-radius: 50%;

    border:6px solid #6E6E6E;

    z-index: 1;

    top:-20px;

}

.mouse .ears::before{

    left:-23px;

}

.mouse .ears::after{

    right: -13px;

    transform: rotate(-90deg);

}

.mouse .eyes::before,

.mouse .eyes::after{

    width:1em;

    height:1em;

    background:

        radial-gradient(

            circle at 50% 70%,

            black 0.2em,

            transparent 0.2em

        ),

        radial-gradient(

            circle at 50% 40%,

            white 1.7em,

            transparent 1.7em

        ),

        white;

        border-radius: 50%;

    top:2em;

}

.mouse .eyes::before{

    left:1.2em;

}

.mouse .eyes::after{

    right:1.5em;

}

.mouse .nose{

    position: absolute;

    width: 0em;

    height: 20em;

    border:solid;

    border-width:50px 23px;

    border-color:#6E6E6E transparent transparent transparent;

    top:3em;

    left:2.1em;

    z-index:2;

}

.mouse .beard{

    position: absolute;

    width: 3.5em;

    height: 1px;

    left:1.2em;

    top:3.5em;

    z-index: 1;

    background-color: black;

}

.mouse .beard::before,

.mouse .beard::after{

    width: 3.5em;

    height: 1px;

    background-color: black;

    transform: rotate(10deg);

    z-index: 1;

}

.mouse .beard::before{

    transform: rotate(10deg);

}

.mouse .beard::after{

    transform: rotate(-10deg);

}

.mouse .teeth::before,

.mouse .teeth::after{

    width: .4em;

    height: .6em;

    background-color: #fff;

    bottom:.5em;

}

.mouse .teeth::before{

    transform: rotate(10deg);

    left:2.4em;

}

.mouse .teeth::after{

    right:2.7em;

    transform: rotate(-10deg);

}

CSS纯代码:鼠

2021年2月21日

相关文章

网友评论

    本文标题:CSS每周一练:鼠

    本文链接:https://www.haomeiwen.com/subject/vxtqfltx.html