css3背景渐变,Css背景渐变
实现
用CSS很难完全复制这种效果。CSS模拟的光效阴影会比较低，只能说尽量还原。
其实每组光基本都是一样的，只需要实现一组，差不多就能实现整体效果了。
观察这种效果：
它的核心其实是角梯度-圆锥曲线-梯度()。通过使用角度梯度，我们可以大致达到这样的效果：
div/div div { width:1000 px；高度：600px背景：圆锥梯度(从400px 300px时的-45度，HSLA(170度，100%，70%， 7)，透明50%，透明)，线性梯度(-45度，#060d5e，# 002268)；}看效果：
那很有趣。当然，仔细观察，渐变色并不是从一种颜色到透明才完成的，而是颜色A -透明-颜色B，这样光源的另一半就不那么生硬了。修改后的CSS代码：
div { width:1000 px；高度：600px背景：圆锥梯度(从400px 300px处的-45度，HSLA(170度，100%，70%， 7)，透明50%，HSLA(219度，90%，80%， 5) 100%)，线性梯度(-45度，#060d5e，# 002268)；}我们在角度渐变的末尾多添加了一种颜色，以获得更好的观感效果：
Emm，到这里我们会发现角梯度conic-gradient()是不够的。它无法模拟光源阴影的效果，所以我们必须使用其他属性来实现光源阴影的效果。
在这里，我们自然会想到box-shadow。这里有一个技巧，使用多个框阴影，以达到霓虹灯的效果。
让我们添加另一个div来实现光源的阴影：
div class= shadow /div . shadow { width:200 px；高度：200px背景：# fff方框阴影：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)，}
好的，我们有光，但问题是我们只需要光的一面。我们做什么呢剪裁的方式有很多种。在这里，我介绍了一种使用clip-path裁剪任何元素空间的方法：阴影{宽度：200px高度：200px背景：# fff方框阴影：clip-path:多边形(-100% 100%，200% 100%，200% 500%，-100% 500%)；}原理是这样的：
这样，我们在一边得到了光：
这里其实CSS也有办法实现单边阴影，但是实际效果不好，最后采用了上面的方案。
接下来，通过使用定位、旋转等。重叠上面提到的单边光线和角度梯度，我们可以得到这样的效果：
现在，还挺像的。接下来要做的就是让整个格局动起来。这里也有很多技巧。核心是用CSS @Property实现角度渐变的动画，让灯光动画和角度渐变重叠。
我们需要利用CSS @Property来转换代码渐变。核心代码如下：
div class= wrap div class= shadow /div/div @ property-xPoint {语法： length ；inherits:false；初始值：400像素；}@property - yPoint {语法：长度；inherits:false；初始值：300像素；}.wrap { position:相对；边距：自动；宽度：1000px高度：600px背景：圆锥梯度(从var( - xPoint) var( - yPoint)的-45度，HSLA(170度，100%，70%， 7)，透明50%，HSLA(219度，90%，80%， 5) 100%)，线性梯度(-45度，#060d5e，# 002268)；动画：pointMove 2.5s无限交替线性；}.影子{位置：绝对；顶：-300 px；左：-330 px；宽度：430px高度：300px背景：# fff变换-原点：100% 100%；变换：旋转(225度)；clip-path:多边形(-100% 100%，200% 100%，200% 500%，-100% 500%)；方框阴影：这里省略了大量的影子代码；动画：尺度2.5s无限交替线性；} @关键帧比例{ 50%，100% {变换：旋转(225度)比例(0)；} } @ key frames point move { 100% {-xPoint:100px；-yPoint:0；}}这样，我们就实现了一个光的完整动画：
我们来梳理一下实现这样一个动画的步骤：
基本框架是用角度渐变圆锥-渐变设置的，这里也用了多重渐变，角度渐变后面是深色背景色；使用多个盒影来达到光影效果(也叫霓虹效果)。clip-path用于裁剪任意区域的元素，CSS @Property用于实现渐变的动画效果。剩下的工作就是重复以上步骤，补充其他渐变和光源，调试动画。最后，我们可以得到这样一个简单的模拟效果：
因为原始效果是. mp4，所以无法得到阴影的确切颜色和参数，其中颜色是由色板直接取的，阴影是随机模拟的。如果有源文件和准确的参数，模拟可以更真实。
完整代码可以戳这里：CodePen - iPhone 13 Pro渐变
最后
这篇文章更多的是关于娱乐。其实要做出以上效果肯定有更优雅的方案，如果用CSS模拟应该有更好的方法。在这里，我只是抛砖引玉，过程中的一些技巧1、2、3、4是值得学习的。
以上是CSS巧妙利用渐变实现高级背景光动画的详细内容。关于CSS渐变背景动画的更多信息，请关注其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。