共计 3211 个字符，预计需要花费 9 分钟才能阅读完成。
背景
在上一篇 巧用滤镜实现高级感拉满的文字快闪切换成果 中，咱们提到了一种十分有意思的之前苹果展现文字的动画成果。
本文，会带来另外一个有意思的成果，巧用突变实现高级感拉满的背景光动画。此成果使用在苹果官网 iPhone 13 Pro 的介绍页中：
实现
这个成果想利用 CSS 齐全复制是比拟艰难的。CSS 模仿进去的光效暗影绝对会 Low 一点，只能说是尽量还原。
其实每组光都根本是一样的，所以咱们只须要实现其中一组，就简直能实现了整个成果。
察看这个成果：
它的外围其实就是 角向突变 — conic-gradient()，利用角向突变，咱们能够大抵实现这样一个成果：
<div></div>div {
width: 1000px;
height: 600px;
background:
conic-gradient(
from -45deg at 400px 300px,
hsla(170deg, 100%, 70%, .7),
transparent 50%,
transparent),
linear-gradient(-45deg, #060d5e, #002268);
}看看成果：
有点那意思了。当然，仔细观察，突变的色彩并非是由一种色彩到通明就完结了，而是色彩 A — 通明 — 色彩 B，这样，光源的另一半并非就不会那么僵硬，革新后的 CSS 代码：
div {
width: 1000px;
height: 600px;
background:
conic-gradient(
from -45deg at 400px 300px,
hsla(170deg, 100%, 70%, .7),
transparent 50%,
hsla(219deg, 90%, 80%, .5) 100%),
linear-gradient(-45deg, #060d5e, #002268);
}咱们在角向突变的最初多加了一种色彩，失去观感更好的一种成果：
emm，到这里，咱们会发现，仅仅是 角向突变 conic-gradient() 是不够的，它无奈模拟出光源暗影的成果，所以必须再借助其余属性实现光源暗影的成果。
这里，咱们会很天然的想到 box-shadow。这里有个技巧，利用多重 box-shadow，实现 Neon 灯的成果。
咱们再加个 div，通过它实现光源暗影：
<div class="shadow"></div>.shadow {
width: 200px;
height: 200px;
background: #fff;
box-shadow:
0px 0 .5px hsla(170deg, 95%, 80%, 1),
0px 0 1px hsla(170deg, 91%, 80%, .95),
0px 0 2px hsla(171deg, 91%, 80%, .95),
0px 0 3px hsla(171deg, 91%, 80%, .95),
0px 0 4px hsla(171deg, 91%, 82%, .9),
0px 0 5px hsla(172deg, 91%, 82%, .9),
0px 0 10px hsla(173deg, 91%, 84%, .9),
0px 0 20px hsla(174deg, 91%, 86%, .85),
0px 0 40px hsla(175deg, 91%, 86%, .85),
0px 0 60px hsla(175deg, 91%, 86%, .85);
}
OK，光是有了，但问题是咱们只须要一侧的光，怎么办呢？裁剪的形式很多，这里，我介绍一种利用 clip-path 进行对元素任意空间进行裁切的办法：
.shadow {
width: 200px;
height: 200px;
background: #fff;
box-shadow: .....;
clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
}原理是这样的：
这样，咱们就失去了一侧的光：
这里，其实 CSS 也是有方法实现单侧暗影的（你所不晓得的 CSS 暗影技巧与细节），然而实际效果并不好，最终采取了上述的计划。
接下来，就是 利用定位、旋转 等形式，将上述单侧光和角向突变重叠起来，咱们就能够失去这样的成果：
这会，曾经挺像了。接下来要做的就是让整个图案，动起来。这里技巧也挺多的，外围还是利用了 CSS @Property，实现了角向突变的动画，并且让光动画和角向突变重叠起来。
咱们须要利用 CSS @Property 对代码突变进行革新，外围代码如下：
<div class="wrap">
<div class="shadow"></div>
</div>@property --xPoint {
syntax: '<length>';
inherits: false;
initial-value: 400px;
}
@property --yPoint {
syntax: '<length>';
inherits: false;
initial-value: 300px;
}
.wrap {
position: relative;
margin: auto;
width: 1000px;
height: 600px;
background:
conic-gradient(from -45deg at var(--xPoint) var(--yPoint),
hsla(170deg, 100%, 70%, .7),
transparent 50%,
hsla(219deg, 90%, 80%, .5) 100%),
linear-gradient(-45deg, #060d5e, #002268);
animation: pointMove 2.5s infinite alternate linear;
}
.shadow {
position: absolute;
top: -300px;
left: -330px;
width: 430px;
height: 300px;
background: #fff;
transform-origin: 100% 100%;
transform: rotate(225deg);
clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
box-shadow: ... 此处省略大量暗影代码;
animation: scale 2.5s infinite alternate linear;
}
@keyframes scale {
50%,
100% {transform: rotate(225deg) scale(0);
}
}
@keyframes pointMove {
100% {
--xPoint: 100px;
--yPoint: 0;
}
}这样，咱们就实现了残缺的一处光的动画：
咱们从新梳理一下，实现这样一个动画的步骤：
- 利用角向突变
conic-gradient搭出根本框架，并且，这里也利用了多重突变，角向突变的背地是深色背景色； - 利用多重
box-shadow实现光及暗影的成果（又称为 Neon 成果） - 利用
clip-path对元素进行任意区域的裁剪 - 利用 CSS @Property 实现突变的动画成果
剩下的工作，就是反复上述的步骤，补充其余突变和光源，调试动画，最终，咱们就能够失去这样一个简略的模仿成果：
因为原成果是 .mp4，无奈拿到其中的精确色彩，无奈拿到暗影的参数，其中色彩是间接用的色板取色，暗影则比拟随便的模仿了下，如果有源文件，精确参数，能够模仿的更真切。
残缺的代码你能够戳这里：CodePen — iPhone 13 Pro Gradient
最初
本文更多的是图一乐呵，理论中制作上述成果必定是有更为优雅的解法，并且利用 CSS 模仿的话，也应该有更好的办法，这里我仅仅是抛砖引玉，过程中的 1、2、3、4 技巧自身有一些还是值得借鉴学习的。
好了，本文到此结束，心愿本文对你有所帮忙 :)
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄
更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。
