如何使用純CSS實現一隻紅色的憤怒小鳥(附代碼)

來源:互聯網
上載者:User
本篇文章給大家帶來的內容是關於如何使用純CSS實現一隻紅色的憤怒小鳥(附代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所協助。

效果預覽

原始碼下載

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

代碼解讀

定義 dom,容器中包含 6 個元素,分別代表頭、眼睛、眉毛、嘴、冠羽、尾巴:

<div class="red">    <span class="head"></span>    <span class="eyes"></span>    <span class="eyebrows"></span>    <span class="mouth"></span>    <span class="hair"></span>    <span class="tail"></span></div>

置中顯示:

body {    margin: 0;    height: 100vh;    display: flex;    align-items: center;    justify-content: center;    background-color: antiquewhite;}

設定子項目的共有屬性:

.red * {    position: absolute;}.red *::before,.red *::after {    content: '';    position: absolute;}

定義容器尺寸:

.red {    width: 12em;    height: 11em;    font-size: 16px;    position: relative;}

畫出頭部輪廓,把描邊參數定義為變數,是因為後面還會用到:

.red {    --border: 0.2em solid #6a0306;}.head {    width: inherit;    height: inherit;    background-color: #dc002d;    border-radius: 45% 55% 45% 45% / 55% 60% 40% 45%;    border: var(--border);}

用虛擬元素畫出眼睛的輪廓:

.eyes::before,.eyes::after {    width: 2.4em;    height: 2.6em;    background: white;    border-radius: 50%;    border: var(--border);}.eyes::before {    top: 3.7em;    left: 5.5em;    z-index: 1;}.eyes::after {    top: 3.8em;    left: 7.8em;}

用放射狀漸層畫出眼珠和瞳孔:

.eyes::before,.eyes::after {    background:         radial-gradient(            circle at calc(var(--eyeball-left) + 6%) 48%,            white 0.1em,            transparent 0.1em        ),        radial-gradient(            circle at var(--eyeball-left) 48%,            black 0.5em,            transparent 0.5em        ),        white;}.eyes::before {    --eyeball-left: 65%;}.eyes::after {    --eyeball-left: 41%;}

用虛擬元素畫出眉毛:

.eyebrows::before,.eyebrows::after {    height: 1.1em;    background-color: black;    top: 3.6em;    z-index: 2;}.eyebrows::before {    left: 5em;    transform: skewY(12deg);    width: 3.4em;}.eyebrows::after {    left: 8.2em;    transform: skewY(-15deg);    width: 3.1em;}

畫出嘴的輪廓:

.mouth {    width: 2.8em;    height: 2.8em;    background-color: #fca90d;    top: 6em;    left: 7em;    z-index: 3;    border-radius: 20% 0 20% 10%;    transform: rotate(34deg) skewX(-15deg);    border: 0.1em solid black;}

用虛擬元素畫出上下頜的分界線:

.mouth::before {    width: 3.4em;    height: 4em;    border: 0.2em solid;    top: -1.6em;    left: -1.8em;    border-radius: 0 0 40% 0;    transform: rotate(42deg);    border-color: transparent black transparent transparent;}

畫出冠羽的左側:

.hair {    width: 1.2em;    height: 3em;    background-color: #dc002d;    border-radius: 50%;    border: var(--border);    top: -1.8em;    left: 2.8em;    transform: rotate(-70deg);    border-bottom-color: transparent;}

用虛擬元素畫出冠羽的右側:

.hair::before {    width: inherit;    height: inherit;    background-color: inherit;    border-radius: inherit;    border: inherit;    top: 1em;    left: 0.8em;    transform: rotate(20deg);}

用虛擬元素把冠羽多餘的搭邊線遮蓋住:

.hair::after {    width: 3em;    height: 2em;    background-color: #dc002d;    border-radius: 50%;    top: 2.3em;    left: -1.5em;    transform: rotate(70deg);}

畫出尾巴中最長的一根羽毛:

.tail {    width: 3em;    height: 1em;    background-color: black;    top: 40%;    left: -1.8em;    z-index: -1;    transform: rotate(15deg);}

用虛擬元素畫出尾巴中較短的兩根羽毛:

.tail::before,.tail::after {    width: inherit;    height: 70%;    background-color: black;    left: 0.6em;}.tail::before {    transform: rotate(25deg);    top: -0.4em;}.tail::after {    transform: rotate(-20deg);    top: 0.8em;}

用虛擬元素畫出胸前的羽毛:

.head {    overflow: hidden;}.head::before {    width: inherit;    height: inherit;    background-color: #e3c4ab;    border-radius: inherit;    top: 65%;    left: 25%;}

接下來畫陰影,增強立體感。

為頭部增加陰影:

.head {    box-shadow:       inset 0.5em -0.5em 0.3em 0.2em rgba(0, 0, 0, 0.2),      inset -1em 0.8em 1.5em -0.5em rgba(237, 178, 144, 0.7);}

為眼睛增加陰影:

.eyes::before {    box-shadow: -0.2em 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.2);}.eyes::after {    box-shadow: 0.2em 0.2em 0.4em 0.3em rgba(0, 0, 0, 0.1);}

為嘴增加陰影:

.mouth {    box-shadow:       inset 0.2em -0.4em 1em rgba(0, 0, 0, 0.4),      inset 0 0.5em 0.5em rgba(255, 255, 255, 0.3);}

大功告成!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.