《前端每日實戰》第173號做品：記念籃球巨星科比·布萊恩特

世事無常，巨星隕落。特以此做品記念籃球巨星科比·布萊恩特。

效果預覽

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

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

源代碼下載

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

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

代碼解讀

1、繪製籃球

定義 DOM 結構，只有一個名爲 .ball 的 <div> 元素，內含一個籃球圖案的 unicode 字符：

<div class="ball">🏀</div>

令容器居中，設置頁面背景色爲由紫色到黑色的徑向漸變：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: radial-gradient(circle, #542482, black);
}

效果以下圖：

設置容器尺寸、字號，放大籃球，這裏用 vmin 單位，使圖案佔據窗口寬高的一半：

.ball {
    width: 50vmin;
    height: 50vmin;
    font-size: 50vmin;
    line-height: 1em;
}

效果以下圖：

2、繪製光環

用 ::before 僞元素繪製光環容器，比主元素寬20%，但高度只有主元素的30%，形狀爲一個矩形，邊框爲橙色：

.ball {
    position: relative;
}

.ball::before {
    content: '';
    position: absolute;
    width: 120%;
    height: 30%;
    left: -10%;
    top: -20%;
    border: 2vmin solid orange;
    box-sizing: border-box;
}

效果以下圖：

爲邊框加圓角，使光環變圓：

.ball::before {
    border-radius: 50%;
}

效果以下圖：

爲光環加上光暈，光暈的顏色是半透明的黃色：

.ball::before {
    box-shadow: 0 0 0.1em hsla(60, 100%, 50%, 0.5);
}

效果以下圖：

3、繪製光暈

接下來用 ::after 僞元素繪製陰影，陰影與主元素等寬，但高只有主元素的20%，定位到主元素的底部，背景色爲半透明的黑色：

.ball::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 20%;
    left: 0;
    bottom: 0;
    background-color: hsla(0, 0%, 0%, 0.6);
}

效果以下圖：

爲陰影容器加圓角屬性使陰影變圓，並將陰影置於籃球后面：

.ball::after {
    border-radius: 50%;
    z-index: -1;
}

效果以下圖：

大功告成！

參考

• 徑向漸變背景，《CSS3 藝術》第4.3節
• 陰影，《CSS3 藝術》第5.1.1節
• 主元素與僞元素的重疊關係，《CSS3 藝術》第1.9.3節

關於我、個人專欄和個人書

張偶，網絡筆名 @comehope，20世紀末觸網，被 Web 的無窮魅力所俘獲，自此始終戰鬥在 Web 開發第一線。

《前端每日實戰》專欄，是我近年來實踐 PBL（project-based learning）方法的結果，以項目驅動學習，展示從靈感閃現到代碼實現的完整過程，亦可做爲前端開發的練手習題和開發參考。

拙做《CSS3 藝術》一書於2020年1月由人民郵電出版社出版，全綵印刷，使用100多個生動美觀的實例，系統地剖析了 CSS 與視覺效果相關的重要語法，並含有近10小時的視頻演示。京東/天貓/噹噹有售。配套資源請訪問人民郵電出版社公衆號：https://mp.weixin.qq.com/s/6X42QkZ5N8JNji8aQ2FFcQ