Javascript 如何将效果应用于CSS形状，使其看起来像一盏逼真的灯？

我一直在尝试构建一个非常简单的Javascript/CSS/HTML页面/应用程序，可以用作语音计时器。我的计划是建立这样一种机制：在演讲者讲话一段时间后，琥珀色的“警告灯”亮起，然后在第二个设定时间后，红灯亮起。例如，如果演讲的目标长度为10分钟，琥珀色灯将在7-8分钟左右显示警告，以鼓励演讲者开始收场，然后红灯将在10分钟亮起，让演讲者知道他们已经超过了分配的时间

无论如何，我已经构建了以下内容（我在一天内完成了这项工作，并掌握了CSS/JavaScript的基本知识，因此我有点为自己感到自豪……）

这是可行的（虽然为了本例的目的，我将时间缩短到了几秒而不是几分钟），但我开始超越自己，想知道是否可以使用CSS在我的形状上应用晶格/玻璃/菱形效果，使其看起来更像“灯”。例如：

提前感谢，并为任何糟糕的编码表示歉意-我是一个完全的新手

谢谢

代码笔在这里：

函数timedText（）{
设lbl=document.getElementById（'startButton'）；
让buttonName=“Running”；
lbl.innerText=按钮名称；
var a=document.getElementById（“amberTime”）；
var amberT=a.options[a.selectedIndex].value；
var r=document.getElementById（“redTime”）；
var redT=r.options[r.selectedIndex]。值；
myVar=setTimeout（myTimeout1，amberT*1000）
myVar2=setTimeout（myTimeout2，redT*1000）
}
函数myTimeout1（）{
//document.getElementById（'amberlight'）.style.background='#ffbf00'；
document.getElementById（“amberlight”）.style.visibility=“可见”；
}
函数myTimeout2（）{
//document.getElementById（'redlight'）.style.background='#ff0000'；
document.getElementById（“红灯”）.style.visibility=“可见”；
}
函数myStopFunction（）{
设lbl=document.getElementById（'startButton'）；
让buttonName=“开始”；
lbl.innerText=按钮名称；
document.getElementById（'amberlight'）。style.visibility='hidden'；
document.getElementById（'redlight'）.style.visibility='hidden'；
清除超时（myVar）；
清除超时（myVar2）；
}

.amberlight{
边界半径：50%；
填充：0px；
宽度：300px；
高度：300px；
保证金：自动；
可见性：隐藏；
动画：发光2500毫秒无限；
}
@关键帧发光{
0%{背景色：#ff7f00；框阴影：0 0 3px#ff7f00；}
50%{背景色：#ff9500；方框阴影：0 0 40px#ff9500；}
100%{背景色：#ff7f00；框阴影：0 0 3px#ff7f00；}
}
.红灯{
边界半径：50%；
填充：0px；
宽度：300px；
高度：300px；
保证金：自动；
可见性：隐藏；
动画：发光2500毫秒无限；
}
@关键帧发光2{
0%{背景色：#cc0000；框阴影：0 0 3px#cc0000；}
50%{背景色：#ff0000；方框阴影：0 0 40px#ff0000；}
100%{背景色：#cc0000；方框阴影：0 0 3px#cc0000；}
}
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
保证金：0自动；
}
运输署{
填充：20px；
文本对齐：居中；
}
.按钮1{
背景色：#4CAF50；
边界：无；
颜色：白色；
填充：15px 35px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
光标：指针；
}
.按钮2{
背景色：#4CAF50；
边界：无；
颜色：白色；
填充：15px 15px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
光标：指针；
}

开始
停止/复位
黄灯时间到了
5秒
10秒
15秒
红灯时间到了
5秒
10秒
15秒
试验
1.
2.

使用图像+过滤器的现实主义灯具 如果您想要逼真的外观，更简单的方法是在准备好的图像上使用

过滤功能：

• 您可以使用此过滤功能使图像显示为更改颜色
• 更改饱和度以使其或多或少饱和
• 你可以通过改变这两个函数来伪装曝光
• 您还可以应用轻微模糊，因为过度曝光的图片通常会失去焦点

也

• 为了获得更好的效果，只修剪要使其发光的零件

• 切片其他部分并覆盖，然后使用

  position:absolute

• 您可以使用其他div（使用绝对定位）覆盖图像，以使用渐变和不透明度合成效果，从而产生“辉光”效果

• 您可以使用CSS或来获得平滑的动画

img{
动画持续时间：5s；
动画名称：动漫；
动画迭代次数：无限；
-动画方向：交替；
动画计时功能：轻松自如；
}
@关键帧动画{
0% {
滤镜：模糊（0px）色调旋转（0deg）饱和（0.5）亮度（0.9）对比度（1.2）；
}
10% {
滤镜：模糊（1px）色调旋转（20度）饱和（1）亮度（3）对比度（2）；
}
30% {
滤镜：模糊（0px）色调旋转（0deg）饱和（0.5）亮度（0.9）对比度（1.2）；
}
31% {
滤镜：模糊（0px）色调旋转（-20度）饱和（0.5）亮度（0.9）对比度（1.2）；
}
40% {
滤镜：模糊（1px）色调旋转（-20度）饱和（1）亮度（2）对比度（2）；
}
60% {
滤镜：模糊（0px）色调旋转（-20度）饱和（0.5）亮度（0.9）对比度（1。