如何使用CSS實現一隻鴨子頭（附代碼）

這篇文章帶給大家的內容是關於如何使用CSS實現一隻鴨子頭（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

效果預覽

原始碼下載

https://github.com/comehop​​e/front- end-daily-challenges

程式碼解讀

定義dom，容器包含4 個元素：

<figure>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</figure>

居中顯示：

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

#定義容器尺寸：

.duck {
    width: 10em;
    height: 10em;
}

用grid 把4 個方塊按2*2 佈局：

.duck {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.duck span {
    background-color: seagreen;
}

把容器旋轉45 度：

.duck {
    transform: rotate(-45deg);
}

設定每個正方形的圓角，組合成一隻鴨子的抽象形狀：

.duck span:nth-child(1) {
    border-top-left-radius: 100%;
}

.duck span:nth-child(2) {
    border-top-right-radius: 100%;
}

.duck span:nth-child(3) {
    border-bottom-right-radius: 100%;
}

.duck span:nth-child(4) {
    border-bottom-left-radius: 100%;
}

為最後一個方塊設置有差異的顏色，使它看起來像鴨子嘴：

.duck span:nth-child(4) {
    background-color: coral;
}

在第2 個方塊用徑向漸變畫出一個圓點，代表鴨子的眼睛：

.duck span:nth-child(2) {
    background-image: radial-gradient(black 0.5em, transparent 0.5em);
}

大功告成！

相關推薦：

如何使用純CSS實現一隻黑色的憤怒小鳥（附程式碼）

如何使用CSS和D3實作黑白交疊的動畫效果

以上是如何使用CSS實現一隻鴨子頭（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！