CSS角向渐变射灯

马黑黑

马黑黑

代码分享：

<style>
#waik {
   margin: auto;
   width: 760px;
   height: 500px;
   background: #000;
   position: relative;
}
#waik::before {
   content: 'nihao';
   position: absolute;
   width: 760px;
   height: 500px;
   background: url('/data/attachment/forum/202204/04/183311aa7vo49o43bpubtp.gif') no-repeat center/cover;
   opacity: .4;
}
</style>

<div id="waik"></div>

<script>
let waik = document.getElementById('waik');
let step = -1, all = 50, angle = 100;
setInterval(flash, 10);
function flash() {
   all = all + step;
   if(all == -angle) step = -step;
   if(all == angle) step = -step;
   waik.style.background = `conic-gradient(at 50% 0, #000 ${all}deg, #fff, #000)`;
}
</script>

马黑黑

顺滑的射灯转动效果，需要JS来实现，CSS的@keyframes难以胜任。

JS部分：利用 setInterval 定时器，每隔100毫秒改变一次#waik选择器的背景样式，用到CSS角向渐变（也称锥形渐变）——



waik.style.background = `conic-gradient(at 50% 0, #000 ${all}deg, #fff, #000)`;

上面这句，角向渐变从 50% 0 处发起，即选择器（盒子）的上方正中央，然后就是三个颜色，头尾两个都是黑色，中间的是白色用以模拟射灯。第一个颜色加入一个数值变量，all，它从100至-100之间演变，它定义的是第一个颜色的角度，它的来回变化会挤开、拉回第二个颜色（白色），从而达成射灯摇来摇去的效果。

JS中对 all 变量用了两个if语句，可以优化成一句——

if(all == -angle || all == angle) step = -step;

意思是，如果 all 在 all + step 的变化中等于 -angle （本例设为100）或者 等于 angle ，则将 step 改为负值，这样，all的值在 all + step 的变化中就会在 100至 -100 之间来回进行。

CSS部分：

用到 #waik 盒子的一个伪元素 ::before，它装载一个背景动图，因为它会在 #waik 盒子的上层，所以设置其 opacity 为 0.4，以便射灯不会被完全遮住。

加林森

来学习，好漂亮的射灯啊。

马黑黑

加林森 发表于 2022-4-4 19:39
来学习，好漂亮的射灯啊。

有点像吧

加林森

马黑黑 发表于 2022-4-4 20:02
有点像吧

我去找个动态图片试一试。

马黑黑

加林森 发表于 2022-4-4 20:06
我去找个动态图片试一试。

这只是效果演示，应用到帖子里，还需琢磨琢磨。你先试着看。

加林森

马黑黑 发表于 2022-4-4 20:42
这只是效果演示，应用到帖子里，还需琢磨琢磨。你先试着看。

我制作出来了一个，你去帮着看看。

马黑黑

加林森 发表于 2022-4-4 20:47
我制作出来了一个，你去帮着看看。

看到了，不错不错

加林森

马黑黑 发表于 2022-4-4 20:48
看到了，不错不错

就是这个效果吧。

红影

马黑黑 发表于 2022-4-4 18:54
顺滑的射灯转动效果，需要JS来实现，CSS的@keyframes难以胜任。

JS部分：利用 setInterval 定时器，每隔 ...

为什么用伪元素装载图片，直接放在父框里不行么？
怎样决定这个“射灯”的角度的？为什么它正好是向下的而不是别的方向？

马黑黑

红影 发表于 2022-4-4 21:33
为什么用伪元素装载图片，直接放在父框里不行么？
怎样决定这个“射灯”的角度的？为什么它正好是向下的 ...

问题一：渐变样式做盒子背景时属于图像类，它们实际上是 background-image 的东东，多背景图片时，大家都100%占满盒子时会有一个无效。我没有试过，但相信肯定会相互干扰。所要用伪元素装在图片并设为一定的透明度。

问题二：射灯的角度，在 background 里有定位设定，at 50% 0 一句表示在 x 轴的 50%、y 轴的 0 发起渐变。

马黑黑

加林森 发表于 2022-4-4 20:49
就是这个效果吧。

大概如此

加林森

马黑黑 发表于 2022-4-4 21:58
大概如此

嗯嗯，挺好的。

马黑黑

加林森 发表于 2022-4-4 22:01
嗯嗯，挺好的。

加林森

马黑黑 发表于 2022-4-4 22:09

红影

马黑黑 发表于 2022-4-4 21:56
问题一：渐变样式做盒子背景时属于图像类，它们实际上是 background-image 的东东，多背景图片时，大家都 ...

嗯嗯，知道了，谢谢黑黑

马黑黑

红影 发表于 2022-4-4 23:57
嗯嗯，知道了，谢谢黑黑

不过可以多琢磨琢磨，是有其它的方法的

红影

马黑黑 发表于 2022-4-4 23:58
不过可以多琢磨琢磨，是有其它的方法的

嗯嗯，这个好像移下来后发现上面是有空白的，中间的确有点密集。

马黑黑

红影 发表于 2022-4-5 20:34
嗯嗯，这个好像移下来后发现上面是有空白的，中间的确有点密集。

圆锥渐变目前主要用途还是使用方面，比如饼状图