《前端每日实战》第173号作品：纪念篮球巨星科比·布莱恩特

世事无常，巨星陨落。特以此作品纪念篮球巨星科比·布莱恩特。

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

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

源代码下载

每日前端实战系列的全部源代码请从 github 下载：

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

代码解读

一、绘制篮球

定义 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;
}

效果如下图：

二、绘制光环

用 ::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);
}

效果如下图：

三、绘制光晕

接下来用 ::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