用css實現一個皮卡丘

時間 2020-06-03

標籤 css 實現一個欄目 CSS 简体版

原文原文鏈接

前言

當我學完css和js後，冒出來一個想法。本身去實現一個可愛的卡通人物。因而我就去codepen找素材，最終選擇了皮卡丘，以下圖。css

準備工做

在開始寫皮卡丘以前，我先觀察了皮卡丘的整個頁面。發現若是要很好的實現這個皮卡丘你不能像寫傳統網頁那樣從左到右佈局，而是要從中間佈局，由於左右兩邊對稱。理清楚了思路以後如今開始編寫頁面結構。html

<div class="skin">
        <div class="eye left"></div>
        <div class="eye right"></div>
        <div class="nose">
            <div class="yuan"></div>
        </div>
        <div class="mouth ">
            <div class="up">
                <div class="lip left"></div>
                <div class="lip right"></div>
            </div>
            <div class="down">
                <div class="yuan1">
                    <div class="yuan2"></div>
                </div>
            </div>
        </div>
        <div class="mouth "></div>
        <div class="face left">
            <img src="src/img/flash.gif" alt="flash">
        </div>
        <div class="face right">
            <img src="src/img/flash.gif" alt="flash">
        </div>
    </div>
複製代碼

頁面結構如上圖所示，當咱們編寫完html結構，就能夠動手去寫css。git

CSS的實現

在這個地方咱們能夠暫時先停一下，再次理清思路。這個皮卡丘的最難點的部分在哪裏？在於皮卡丘嘴巴上的弧線以及下面橢圓形的舌頭。github

在實現皮卡丘嘴巴上的弧線時，我產生了兩個想法。第一用一個標籤包裹實現這個弧線，第二分別用兩個標籤去包裹實現這兩個弧線。最終我選擇了第二種。在這裏我觀察皮卡丘嘴巴上的弧線發現這個弧線就是圓角矩形的四分之一，加上旋轉就能夠實現這兩個弧線。佈局

具體實現以下ui

.mouth .up {
    position: relative;
    top: -20px;
    z-index: 1;
}

.mouth .up .lip {
    border: 3px solid black;
    height: 30px;
    width: 100px;
    background: #ffe600;
    border-top-color: transparent;
    border-right-color: transparent;
    position: relative;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
.mouth .up .lip.left {
    border-radius: 0 0 0 35px;
    transform: rotate(-20deg) translateX(-53px);
}

.mouth .up .lip.right {
    border-radius: 0 0 35px 0;
    transform: rotate(20deg) translateX(53px);
}

.mouth .up .lip::before {
    content: '';
    display: block;
    width: 7px;
    height: 30px;
    position: absolute;
    bottom: 0;
    background: #ffe600;
}

.mouth .up .lip.left::before {
    right: -6px;
}

.mouth .up .lip.right::before {
    left:  -6px;
}
複製代碼

第一個大難點已經解決,接下來解決第二個難點。如何實現皮卡丘的下嘴脣。spa

觀察皮卡丘的舌頭我發現這其實是一個橢圓的一部分或者圓角矩形的一部分，那我就須要截取一部分的橢圓或者圓角矩形就能實現皮卡丘的舌頭。第二個解決點怎麼實現皮卡丘舌頭粉色的部分,有了上面的思路以後，沿着這個思路繼續想，實際上這就是兩個圓角矩形或者橢圓形的交界處實現的。code

畫的不是太好各位客官見諒了。orm

具體的代碼的實現以下cdn

.mouth .down {
    height: 180px;
    position: absolute;
    top: 5px;
    width: 100%;
    overflow: hidden;
}

.mouth .down .yuan1 {
    border: 3px solid black;
    width: 150px;
    height: 1000px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    border-radius: 75px/300px;
    background: #9b000a;
    overflow: hidden;
}

.mouth .down .yuan1 .yuan2 {
    width: 200px;
    height: 300px;
    background: #ff485f;
    position: absolute;
    bottom: -160px;
    left: 50%;
    margin-left: -100px;
    border-radius: 100px;
}
複製代碼