CSS巧用渐变实现高级感背景光动画

絔誮公紸

实现

这个效果想利用 CSS 完全复制是比较困难的。CSS 模拟出来的光效阴影相对会 Low 一点，只能说是尽量还原。

其实每组光都基本是一样的，所以我们只需要实现其中一组，就几乎能实现了整个效果。

观察这个效果：

它的核心其实就是角向渐变 -- conic-gradient()，利用角向渐变，我们可以大致实现这样一个效果：

1. <div></div>

复制代码

1. div {
3. width: 1000px;
5. height: 600px;
7. background:
9. conic-gradient(
11. from -45deg at 400px 300px,
13. hsla(170deg, 100%, 70%, .7),
15. transparent 50%,
17. transparent),
19. linear-gradient(-45deg, #060d5e, #002268);
21. }

复制代码

看看效果：

有点那意思了。当然，仔细观察，渐变的颜色并非是由一种颜色到透明就结束了，而是颜色 A -- 透明 -- 颜色 B，这样，光源的另一半并非就不会那么生硬，改造后的 CSS 代码：

1. div {
2. width: 1000px;
3. height: 600px;
4. background:
5. conic-gradient(
6. from -45deg at 400px 300px,
7. hsla(170deg, 100%, 70%, .7),
8. transparent 50%,
9. hsla(219deg, 90%, 80%, .5) 100%),
10. linear-gradient(-45deg, #060d5e, #002268);
11. }

复制代码

我们在角向渐变的最后多加了一种颜色，得到观感更好的一种效果：

emm，到这里，我们会发现，仅仅是角向渐变 conic-gradient() 是不够的，它无法模拟出光源阴影的效果，所以必须再借助其他属性实现光源阴影的效果。

这里，我们会很自然的想到 box-shadow。这里有个技巧，利用多重 box-shadow， 实现 Neon 灯的效果。

我们再加个 div，通过它实现光源阴影：

1. <div class="shadow"></div>

复制代码

1. .shadow {
2. width: 200px;
3. height: 200px;
4. background: #fff;
5. box-shadow:
6. 0px 0 .5px hsla(170deg, 95%, 80%, 1),
7. 0px 0 1px hsla(170deg, 91%, 80%, .95),
8. 0px 0 2px hsla(171deg, 91%, 80%, .95),
9. 0px 0 3px hsla(171deg, 91%, 80%, .95),
10. 0px 0 4px hsla(171deg, 91%, 82%, .9),
11. 0px 0 5px hsla(172deg, 91%, 82%, .9),
12. 0px 0 10px hsla(173deg, 91%, 84%, .9),
13. 0px 0 20px hsla(174deg, 91%, 86%, .85),
14. 0px 0 40px hsla(175deg, 91%, 86%, .85),
15. 0px 0 60px hsla(175deg, 91%, 86%, .85);
16. }

复制代码

OK，光是有了，但问题是我们只需要一侧的光，怎么办呢？裁剪的方式很多，这里，我介绍一种利用 clip-path 进行对元素任意空间进行裁切的方法：

1. .shadow {
2. width: 200px;
3. height: 200px;
4. background: #fff;
5. box-shadow: .....;
6. clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
7. }

复制代码

原理是这样的：

这样，我们就得到了一侧的光：

这里，其实 CSS 也是有办法实现单侧阴影的，但是实际效果并不好，最终采取了上述的方案。

接下来，就是利用定位、旋转等方式，将上述单侧光和角向渐变重叠起来，我们就可以得到这样的效果：

这会，已经挺像了。接下来要做的就是让整个图案，动起来。这里技巧也挺多的，核心还是利用了 CSS @Property，实现了角向渐变的动画，并且让光动画和角向渐变重叠起来。

我们需要利用 CSS @Property 对代码渐变进行改造，核心代码如下：

1. <div class="wrap">
2. <div class="shadow"></div>
3. </div>

复制代码

1. @property --xPoint {
2. syntax: '<length>';
3. inherits: false;
4. initial-value: 400px;
5. }
6. @property --yPoint {
7. syntax: '<length>';
8. inherits: false;
9. initial-value: 300px;
10. }
12. .wrap {
13. position: relative;
14. margin: auto;
15. width: 1000px;
16. height: 600px;
17. background:
18. conic-gradient(
19. from -45deg at var(--xPoint) var(--yPoint),
20. hsla(170deg, 100%, 70%, .7),
21. transparent 50%,
22. hsla(219deg, 90%, 80%, .5) 100%),
23. linear-gradient(-45deg, #060d5e, #002268);
24. animation: pointMove 2.5s infinite alternate linear;
25. }
27. .shadow {
28. position: absolute;
29. top: -300px;
30. left: -330px;
31. width: 430px;
32. height: 300px;
33. background: #fff;
34. transform-origin: 100% 100%;
35. transform: rotate(225deg);
36. clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
37. box-shadow: ... 此处省略大量阴影代码;
38. animation: scale 2.5s infinite alternate linear;
39. }
41. @keyframes scale {
42. 50%,
43. 100% {
44. transform: rotate(225deg) scale(0);
45. }
46. }
48. @keyframes pointMove {
49. 100% {
50. --xPoint: 100px;
51. --yPoint: 0;
52. }
53. }

复制代码

这样，我们就实现了完整的一处光的动画：

我们重新梳理一下，实现这样一个动画的步骤：

1. 利用角向渐变 conic-gradient 搭出基本框架，并且，这里也利用了多重渐变，角向渐变的背后是深色背景色；
2. 利用多重 box-shadow 实现光及阴影的效果（又称为 Neon 效果）
3. 利用 clip-path 对元素进行任意区域的裁剪
4. 利用 CSS @Property 实现渐变的动画效果

剩下的工作，就是重复上述的步骤，补充其他渐变和光源，调试动画，最终，我们就可以得到这样一个简单的模拟效果：

由于原效果是 .mp4，无法拿到其中的准确颜色，无法拿到阴影的参数，其中颜色是直接用的色板取色，阴影则比较随意的模拟了下，如果有源文件，准确参数，可以模拟的更逼真。

完整的代码你可以戳这里：CodePen -- iPhone 13 Pro Gradient

最后

本文更多的是图一乐呵，实际中制作上述效果肯定是有更为优雅的解法，并且利用 CSS 模拟的话，也应该有更好的方法，这里我仅仅是抛砖引玉，过程中的 1、2、3、4 技巧本身有一些还是值得借鉴学习的。

以上就是CSS巧用渐变实现高级感背景光动画 的详细内容，更多关于CSS渐变背景动画的资料请关注晓枫资讯其它相关文章！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

XIAOJIEW

感谢分享~~~~学习学习~~~~~~

空581

谢谢分享~~~~~

晏力

路过，支持一下

123457886

感谢楼主，顶。

123464485

感谢楼主分享。