最近新款“十三香”终于上市了，不少土豪朋友已经第一时间下单了iPhone 13，作为一名囊中羞涩的前端搬砖民工默默的看了看手中8年前的5S不敢说话，但为了融入土豪朋友们，俺默默的用CSS绘制出iPhone 13的经典背景，看上去好像也还蛮合适的，不信你瞧~
下面我们一起来看看怎么用纯CSS绘制出iPhone 13的经典背景，让咱也体验一下“十三香”，赶一下潮流~
纯CSS绘制iPhone 13背景
这里需要用到CSS Images Module Level 4规范中新定义的一种渐变：锥形渐变（conic-gradient）。关于锥形渐变我们等下再细聊，话不多说，直接上代码看效果：
第一步
先定义一个手机形状的背景盒子，随便给个背景颜色，代码如下：
<div class="bg-box"></div>
CSS属性：
.bg-box {
width: 414px;
height: 736px;
background: #011245;
}
第二步
在盒子内添加一个盒子，如下：
<div class="bg-box">
<div class="bg-up"></div>
</div>
CSS属性：
.bg-up {
position: relative;
height: 368px;
background: linear-gradient(#011245, #011245), conic-gradient(from 180deg, #45d6f0, #5081d5 20%, #002082 40%, #000, #002082 60%, #5081d5 80%, #45d6f0);
background-blend-mode: overlay; /* 背景混个模式：叠加 */
}
效果如下：
然后再增加一个伪类，作为中间的发光源：
.bg-up::before {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -1px;
display: inline-block;
content: "";
width: 2px;
height: 184px;
background: rgba(255, 255, 255, 0.8);
border-radius: 2px 2px 0 0;
}
效果如下：
是不是有点感觉了？
第三步
接下来我们再将这个盒子复制一份，同时给它翻转一下，成了~
完整的代码如下：
HTML：
<div class="bg-box">
<div class="bg-up"></div>
<div class="bg-bottom"></div>
</div>
CSS：
.bg-box {
width: 414px;
height: 736px;
margin: 0 auto;
background: #011245;
}
.bg-up,
.bg-bottom {
position: relative;
height: 368px;
background: linear-gradient(#011245, #011245), conic-gradient(from 180deg, #45d6f0, #5081d5 20%, #002082 40%, #000, #002082 60%, #5081d5 80%, #45d6f0);
background-blend-mode: overlay;
}
.bg-up::before,
.bg-bottom::before {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -1px;
display: inline-block;
content: "";
width: 2px;
height: 184px;
background: rgba(255, 255, 255, 0.8);
border-radius: 2px 2px 0 0;
}
.bg-bottom {
transform: rotate(180deg);
}
.bg-up::before {
box-shadow: 2px 0 5px #1e80ff;
}
.bg-bottom::before {
box-shadow: -2px 0 5px #1e80ff;
}
你相信光吗？相信的话大家可以继续打磨一下，绘制出三根发光线条，然后合并出完整的iPhone 13背景图，如果大家有更好的方法也欢迎一起交流~
好了，聊完“十三香”后，接下来让我们好好认识一下上面提到实现iPhone 13背景的一个重要的CSS属性：锥形渐变。
锥形渐变
锥形渐变，顾名思义：锥形锥形，就是渐变的图案像圆锥。它是继**线性渐变（linear-gradient）和径向渐变（radial-gradient）**之后的一种新的CSS渐变。
先来看下锥形渐变最基本的效果：
background: conic-gradient(#f00, #ff0); /* 左 */
background: conic-gradient(from 45deg, #fff, #000, #fff); /* 右 */
右边的图，是不是很像一个尖顶正对着我们的锥体？
锥形渐变的语法
我们来简单来了解一下锥形渐变的语法：
conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
1.起始角度 angle
可选项，角度前加from关键字，代表以此角度为起始，使用顺时针方向进行渐变旋转，如下：
background: conic-gradient(#f00, #ff0); /* 左 */
background: conic-gradient(from 45deg, #f00, #ff0); /* 右 */
2.中心位置 position
可选项，位置前加at关键字，可设置锥形中心点的位置，设置值与background-position相同，例如：
background: conic-gradient(#f00, #ff0); /* 左 */
background: conic-gradient(at 30% 30%, #f00, #ff0); /* 右 */
默认情况下，锥形渐变的中心点为正中心，而设置position后，中心点的位置是以具体值的位置开始计算。
3.颜色断点 angular-color-stop-list
同另外两个渐变一样，我们可以设置多个颜色，以及每个颜色的"起始位置"：
background: conic-gradient(#f00, #ff0); /* 左 */
background: conic-gradient(#f00, #ff0 45deg); /* 中 */
background: conic-gradient(#f00 50%, #ff0 50%); /* 右 */
大家可以发现，图三的颜色断点中前一个与后一个的位置相等，会达到直接切分颜色的效果，那既然这样，多弄几个颜色切分一下岂不就可以实现饼状图的效果？下面来看看实际的应用。
锥形渐变的应用场景
通过锥形渐变（conic-gradient）我们可以非常方便的实现过去很难实现的效果，例如饼图、Loading图、色盘等各种效果，下面我们来看几个示例。
饼图
<div class="pie"></div>
<style>
.pie {
width: 200px;
height: 200px;
margin: 50px auto;
background: conic-gradient(#f90 0, #f90 30%, #6c0 30%, #6c0 70%, #09f 70%, #09f 100%);
border-radius: 50%;
}
</style>
Loading
这里还用到了mask(遮罩)这个新的CSS属性，有兴趣的可以查阅相关文档了解一下，这里就不展开了，来看看锤形渐变实现Loading图的代码示例：
<div class="loading"></div>
<style>
.loading {
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
background: conic-gradient(#fff, 30%, #09f);
--mask: radial-gradient(closest-side, transparent 75%, #000 76%);
-webkit-mask-image: var(--mask);
mask-image: var(--mask);
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
仪表盘
<div class="bg">
<div class="point"></div>
</div>
<style>
body {
background: #fff;
}
.bg {
position: relative;
margin: 50px auto;
width: 400px;
height: 400px;
border-radius: 50%;
background: conic-gradient(
#f1462c 0%,
#fc5d2c 12.4%,
#fff 12.5%,
#fff 12.5%,
#fc5d2c 12.5%,
#fba73e 24.9%,
#fff 24.9%,
#fff 25%,
#fba73e 25%,
#e0fa4e 37.4%,
#fff 37.4%,
#fff 37.5%,
#e0fa4e 37.5%,
#12dd7e 49.9%,
#fff 49.9%,
#fff 50%,
#12dd7e 50%,
#0a6e3f 62.4%,
#fff 62.4%,
#fff 62.5%
);
transform: rotate(-112.5deg);
transform-origin: 50% 50%;
}
.bg::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 370px;
height: 370px;
border-radius: 50%;
background: #fff;
}
.bg::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(
#fff 0%,
#fff 25%,
transparent 25%,
transparent 100%
),
conic-gradient(
#f1462c 0 12.5%,
#fba73e 0 25%,
#e0fa4e 0 37.5%,
#12dd7e 0 50%,
#0a6e3f 0 62.5%,
#fff 0 100%
);
}
.point {
position: absolute;
width: 30px;
height: 30px;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
background: radial-gradient(#467dc6 0%, #a4c6f3 100%);
border-radius: 50%;
z-index: 999;
}
.point::before {
content: "";
position: absolute;
width: 5px;
height: 350px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(0);
border-radius: 100% 100% 5% 5%;
background: linear-gradient(
180deg,
#9bc7f6 0,
#467dc6 50%,
transparent 50%,
transparent 100%
);
animation: rotate 3s cubic-bezier(.93, 1.32, .89, 1.15) infinite;
}
@keyframes rotate {
50% {
transform: translate(-50%, -50%) rotate(150deg);
}
100% {
transform: translate(-50%, -50%) rotate(150deg);
}
}
</style>
写在最后
以上就是对锥形渐变（conic-gradient）的一些简单分享，更详细的可以翻阅文档或参考更多实践。通过锥形渐变，让我们可以用纯CSS绘制iPhone 13背景图，还有Loading图、饼状图等多种实际业务场景效果，希望大家学会后能玩出更多花样并应用于业务当中~
