前端每日實戰：73# 視頻演示如何用純 CSS 創做一隻卡通狐狸

時間 2019-11-06

標籤前端每日實戰視頻演示如何 css 一隻卡通狐狸欄目 CSS 简体版

原文原文鏈接

效果預覽

按下右側的「點擊預覽」按鈕能夠在當前頁面預覽，點擊連接能夠全屏預覽。css

https://codepen.io/comehope/pen/OEKZedhtml

可交互視頻

此視頻是能夠交互的，你能夠隨時暫停視頻，編輯視頻中的代碼。前端

請用 chrome, safari, edge 打開觀看。git

https://scrimba.com/p/pEgDAM/cvEm3uqgithub

源代碼下載

每日前端實戰系列的所有源代碼請從 github 下載：chrome

https://github.com/comehope/front-end-daily-challengesdom

代碼解讀

定義 dom，容器中包含 2 個元素，即頭和尾巴，<head> 再包含 4 個元素，表示臉頰、眼睛、耳朵和鼻子。flex

<div class="fox">
    <div class="head">
        <span class="faces"></span>
        <span class="eyes"></span>
        <span class="ears"></span>
        <span class="nose"></span>
    </div>
    <div class="tail"></div>
</div>

居中顯示：spa

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    --bc: teal;
    background-color: var(--bc);
}

定義容器尺寸：code

.fox {
    width: 7em;
    height: 9em;
    font-size: 30px;
}

畫出圓形的頭部輪廓：

.fox {
    --c: chocolate;
    position: relative;
    color: var(--c);
}

.fox .head {
    position: absolute;
    width: 6em;
    height: 6em;
    background-color: currentColor;
    border-radius: 50%;
    right: 0;
}

畫出葉片形的臉頰：

.fox .faces::before,
.fox .faces::after {
    content: '';
    position: absolute;
    width: 3em;
    height: 3em;
    background-color: white;
    border-radius: 0 100% 0 100%;
    top: 3em;
}

.fox .faces::after {
    right: 0;
    transform: rotate(-90deg);
}

畫出半圓形的眼睛：

.fox .eyes::before,
.fox .eyes::after {
    content: '';
    position: absolute;
    border: 0.3em solid;
    border-color: black black transparent transparent;
    border-radius: 50%;
    top: 4.5em;
}

.fox .eyes::before {
    left: 1em;
}

.fox .eyes::after {
    right: 1em;
    transform: rotate(-90deg);
}

畫出扇形的耳朵：

.fox .ears::before,
.fox .ears::after {
    width: 3em;
    height: 3em;
    background-color: currentColor;
    filter: brightness(1.25);
    border-radius: 0 100% 0 0;
    z-index: -1;
}

.fox .ears::after {
    right: 0;
    transform: rotate(-90deg);
}

畫出圓形的鼻子：

.fox .nose{
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: black;
    border-radius: 50%;
    top: calc(6em - 1em / 2);
    right: calc((6em - 1em) / 2);
    transform: scale(0.9);
}

畫出圓形的尾巴：

.fox .tail{
    width: 7em;
    height: 7em;
    background-color: currentColor;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    bottom: 0;
}

去掉尾巴左上角的扇形：

.fox .tail::before {
    content: '';
    position: absolute;
    width: calc(7em / 2);
    height: calc(7em / 2);
    background-color: var(--bc);
    border-radius: 100% 0 0 0;
}

畫出扇形的尾巴尖：

.fox .tail{
    overflow: hidden;
}

.fox .tail::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: 0 0 100% 0;
    background: white;
    bottom: calc(7em / 2 - 1em);
}

最後，增長鼠標懸停效果：

.fox {
    transition: 1s;
}

.fox:hover {
    --c: lightblue;
}

大功告成！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。