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>
<p>代码分享：<br><br></p>
<pre><style>
<span style="color: red;">#waik </span>{
<span style="color: blue;">margin</span>: auto;
<span style="color: blue;">width</span>: 760px;
<span style="color: blue;">height</span>: 500px;
<span style="color: blue;">background</span>: #000;
<span style="color: blue;">position</span>: relative;
}
<span style="color: red;">#<span style="color: blue;">waik</span>:<span style="color: blue;"></span>:before </span>{
<span style="color: blue;">content</span>: <span style="color: magenta">'nihao'</span>;
<span style="color: blue;">position</span>: absolute;
<span style="color: blue;">width</span>: 760px;
<span style="color: blue;">height</span>: 500px;
<span style="color: blue;">background</span>: url(<span style="color: magenta">'/data/attachment/forum/202204/04/183311aa7vo49o43bpubtp.gif'</span>) no-repeat center/cover;
<span style="color: blue;">opacity</span>: .4;
}
</style>
<<span style="color:darkred">div</span> <span style="color: red">id</span><span style="color: blue">=</span><span style="color: magenta">"waik"</span>><<span style="color: darkred">/div</span>>
<script>
<span style="color: blue">let</span> waik = <span style="color: red">document</span>.getElementById(<span style="color: magenta">'waik'</span>);
<span style="color: blue">let</span> step = -1, all = 50, angle = 100;
setInterval(flash, 10);
<span style="color: blue">function</span> flash() {
all = all + step;
<span style="color: blue">if</span>(all == -angle) step = -step;
<span style="color: blue">if</span>(all == angle) step = -step;
waik.style.background = `conic-gradient(at 50% 0, #000 ${all}deg, #fff, #000)`;
}
</script>
</pre>
顺滑的射灯转动效果，需要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，以便射灯不会被完全遮住。
来学习，好漂亮的射灯啊。{:4_199:} 加林森 发表于 2022-4-4 19:39
来学习，好漂亮的射灯啊。
有点像吧 马黑黑 发表于 2022-4-4 20:02
有点像吧
我去找个动态图片试一试。 加林森 发表于 2022-4-4 20:06
我去找个动态图片试一试。
这只是效果演示，应用到帖子里，还需琢磨琢磨。你先试着看。 马黑黑 发表于 2022-4-4 20:42
这只是效果演示，应用到帖子里，还需琢磨琢磨。你先试着看。
我制作出来了一个，你去帮着看看。{:4_189:} 加林森 发表于 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
嗯嗯，挺好的。
{:5_108:} 马黑黑 发表于 2022-4-4 22:09
{:5_108:} 马黑黑 发表于 2022-4-4 21:56
问题一：渐变样式做盒子背景时属于图像类，它们实际上是 background-image 的东东，多背景图片时，大家都 ...
嗯嗯，知道了，谢谢黑黑{:4_187:} 红影 发表于 2022-4-4 23:57
嗯嗯，知道了，谢谢黑黑
不过可以多琢磨琢磨，是有其它的方法的 马黑黑 发表于 2022-4-4 23:58
不过可以多琢磨琢磨，是有其它的方法的
嗯嗯，这个好像移下来后发现上面是有空白的，中间的确有点密集。 红影 发表于 2022-4-5 20:34
嗯嗯，这个好像移下来后发现上面是有空白的，中间的确有点密集。
圆锥渐变目前主要用途还是使用方面，比如饼状图
页:
[1]
2