前端每日實(shí)戰(zhàn)：73# 視頻演示如何用純 CSS 創(chuàng)作一只卡通狐貍

CKJOKER 發(fā)布于2019-08-02 10:50 / 598人閱讀

摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從下載代碼解讀定義，容器中包含個(gè)元素，即頭和尾巴，再包含個(gè)元素，表示臉頰眼睛耳朵和鼻子。

效果預(yù)覽

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。

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

可交互視頻

此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

請(qǐng)用 chrome, safari, edge 打開(kāi)觀(guān)看。

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

源代碼下載

每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載：

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

代碼解讀

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

居中顯示：

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

定義容器尺寸：

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

畫(huà)出圓形的頭部輪廓：

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

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

畫(huà)出葉片形的臉頰：

.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);
}

畫(huà)出半圓形的眼睛：

.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);
}

畫(huà)出扇形的耳朵：

.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);
}

畫(huà)出圓形的鼻子：

.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);
}

畫(huà)出圓形的尾巴：

.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;
}

畫(huà)出扇形的尾巴尖：

.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);
}

最后，增加鼠標(biāo)懸停效果：

.fox {
    transition: 1s;
}

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

大功告成！

云服務(wù)器 GPU云服務(wù)器如何用css 如何用vue開(kāi)發(fā)實(shí)時(shí)音視頻純CSS 卡通人物視頻制作

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52595.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

CKJOKER

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

CDN加速可以為網(wǎng)絡(luò)用戶(hù)解決哪些難題？

閱讀 1026·2021-11-22 13:52
CSS實(shí)現(xiàn)照片堆疊效果

閱讀 936·2019-08-30 15:44
偽元素能做好多事

閱讀 580·2019-08-30 15:43
行內(nèi)元素和塊狀元素居中

閱讀 2436·2019-08-30 12:52
對(duì)min/max-width/height的認(rèn)識(shí)

閱讀 3484·2019-08-29 16:16
loading

閱讀 645·2019-08-29 13:05
整理2

閱讀 2951·2019-08-26 18:36
前端利用pdfobject.js處理pdf文件

閱讀 2006·2019-08-26 13:46

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端每日實(shí)戰(zhàn)：73# 視頻演示如何用純 CSS 創(chuàng)作一只卡通狐貍

相關(guān)文章