如何使用纯CSS实现大白的形象

2024-01-17 11:26 小编
   源代码下载
    https://github.com/comehope/front-end-daily-challenges
    代码解读
    整个人物分为3部分:头、身体、腿,下面按照这个顺序分别画出,先画头部。
    定义dom,容器.baymax表示大白,head表示头部:
    <divclass="baymax">
    <divclass="head">
    <divclass="eyes"></div>
    </div>
    </div>
    居中显示:
    body{
    margin:0;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:rgba(176,0,0,0.75);
    }
    定义容器尺寸和子元素对齐方式:
    .baymax{
    width:30em;
    height:41em;
    font-size:10px;
    display:flex;
    justify-content:center;
    position:relative;
    }
    画出头部轮廓:
    .head{
    position:absolute;
    width:9em;
    height:6em;
    background-color:white;
    border-radius:50%;
    box-shadow:
    inset0-1.5em3emrgba(0,0,0,0.2),
    00.5em1.5emrgba(0,0,0,0.2);
    }
    画出双眼中间的线条:
    .head.eyes{
    position:absolute;
    width:4.8em;
    height:0.1em;
    background-color:#222;
    top:2.3em;
    left:calc((9em-4.8em)/2);
    }
    画出双眼:
    .head.eyes::before,
    .head.eyes::after{
    content:'';
    position:absolute;
    width:0.8em;
    height:0.9em;
    background-color:#222;
    border-radius:50%;
    top:-0.3em;
    }
    .head.eyes::after{
    right:0;
    }
    接下来画身体。
    html文件中增加身体的dom元素:
    <divclass="baymax">
    <divclass="head">
    <!--略-->
    </div>
    <divclass="body">
    <divclass="chest">
    <spanclass="button"></span>
    </div>
    <divclass="belly"></div>
    <divclass="leftarm">
    <divclass="fingers"></div>
    </div>
    <divclass="rightarm">
    <divclass="fingers"></div>
    </div>
    </div>
    </div>
    定义身体的宽度:
    .body{
    position:absolute;
    width:inherit;
    }
    画出胸部:
    .body.chest{
    position:absolute;
    width:19em;
    height:26em;
    background-color:white;
    top:4em;
    left:calc((100%-19em)/2);
    border-radius:50%;
    z-index:-1;
    }
    画出胸前的按钮:
    .body.chest.button{
    position:absolute;
    width:2em;
    height:2em;
    background-color:white;
    border-radius:50%;
    top:4em;
    right:4em;
    box-shadow:
    inset0-0.5em0.8emrgba(0,0,0,0.15),
    0.2em0.3em0.2emrgba(0,0,0,0.05);
    filter:opacity(0.75);
    }
    画出肚皮:
    .body.belly{
    position:absolute;
    width:24em;
    height:31em;
    background-color:white;
    top:5.5em;
    left:calc((100%-24em)/2);
    border-radius:50%;
    z-index:-2;
    box-shadow:
    inset0-2.5em4emrgba(0,0,0,0.15),
    00.5em1.5emrgba(0,0,0,0.25);
    }
    定义胳膊的高度起点:
    .body.arm{
    position:absolute;
    top:7.5em;
    }
    胳膊分为肘以上的部分和肘以下的部分。
    先设计这两段的共有属性:
    .body.arm::before,
    .body.arm::after{
    content:'';
    position:absolute;
    background-color:white;
    border-radius:50%;
    transform-origin:top;
    z-index:-3;
    }
    再用伪元素分别画出这两部分:
    .body.arm::before{
    width:9em;
    height:20em;
    left:7em;
    transform:rotate(30deg);
    }
    .body.arm::after{
    width:8em;
    height:15em;
    left:-0.8em;
    top:9.5em;
    transform:rotate(-5deg);
    box-shadow:inset0.4em-1em1emrgba(0,0,0,0.2);
    }
    定义两根手指的共有属性:
    .body.arm.fingers::before,
    .body.arm.fingers::after{
    content:'';
    position:absolute;
    width:1.8em;
    height:4em;
    background-color:white;
    border-radius:50%;
    transform-origin:top;
    }
    用伪元素分别画出两根手指:
    .body.arm.fingers::before{
    top:22em;
    left:2em;
    transform:rotate(-25deg);
    box-shadow:inset0.2em-0.4em0.4emrgba(0,0,0,0.4);
    }
    .body.arm.fingers::after{
    top:21.5em;
    left:4.8em;
    transform:rotate(-5deg);
    box-shadow:inset-0.2em-0.4em0.8emrgba(0,0,0,0.3);
    z-index:-3;
    }
    至此,完成了右胳膊。把右胳膊复制并水平翻转,即可得到左胳膊:
    .body.arm.left{
    transform:scaleX(-1);
    right:0;
    z-index:-3;
    }
    接下来画腿部。
    在html文件中增加腿的dom元素:
    <divclass="baymax">
    <divclass="head">
    <!--略-->
    </div>
    <divclass="body">
    <!--略-->
    </div>
    <divclass="leftleg"></div>
    <divclass="rightleg"></div>
    </div>
    画出腿的内侧:
    .leg{
    position:absolute;
    width:5em;
    height:16em;
    bottom:0;
    background-color:white;
    border-bottom-right-radius:1.5em;
    left:10em;
    box-shadow:inset-0.7em-0.6em0.7emrgba(0,0,0,0.1);
    z-index:-3;
    }
    画出腿的外侧:
    .leg::before{
    content:'';
    position:absolute;
    width:2.5em;
    height:inherit;
    background-color:white;
    border-bottom-left-radius:100%;
    left:-2.5em;
    box-shadow:inset0.7em1.5em0.7emrgba(0,0,0,0.4);
    }
    至此,完成了右腿。把右腿复制并水平翻转,即可得到左腿:
    .leg.left{
    transform-origin:right;
    transform:scaleX(-1);
    }


Tag: 如何
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码