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

Question

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

无论如何 - 我已经构建了以下内容(我在一天内完成了这项工作，对 CSS/JavaScript 有非常基本的了解，所以我为自己感到骄傲......)。

这行得通(尽管出于示例的目的，我将时间缩短为秒而不是分钟)但我开始超越自己并想知道是否可以使用 CSS 来应用格子/玻璃/钻石类型影响我的形状，使它看起来更像“灯”。例如:Lamp Image

提前致谢，并对任何糟糕的编码礼仪表示歉意 - 我是一个完全的新手。

谢谢!

代码笔在这里:Codepen

function timedText() {
    let lbl = document.getElementById('startButton');
    let buttonName = "Running";
    lbl.innerText = buttonName;   
    var a = document.getElementById("amberTime");
    var amberT = a.options[a.selectedIndex].value;
    var r = document.getElementById("redTime");
    var redT = r.options[r.selectedIndex].value;
    myVar = setTimeout(myTimeout1, amberT * 1000) 
    myVar2 = setTimeout(myTimeout2, redT * 1000) 
}

function myTimeout1() {
    //document.getElementById('amberlight').style.background = '#ffbf00';
    document.getElementById("amberlight").style.visibility = "visible";
}
function myTimeout2() {
    //document.getElementById('redlight').style.background = '#ff0000';
    document.getElementById("redlight").style.visibility = "visible";
}


function myStopFunction() {
    let lbl = document.getElementById('startButton');
    let buttonName = "Start";
    lbl.innerText = buttonName;   
    document.getElementById('amberlight').style.visibility = 'hidden';
    document.getElementById('redlight').style.visibility = 'hidden';
    clearTimeout(myVar);
    clearTimeout(myVar2);
}

.amberlight {
  border-radius: 50%;
  padding: 0px; 
  width: 300px;
  height: 300px;  
  margin:auto;
  visibility:hidden;
  animation: glowing 2500ms infinite;
}

@keyframes glowing {
  0% { background-color: #ff7f00; box-shadow: 0 0 3px #ff7f00; }
  50% { background-color: #ff9500; box-shadow: 0 0 40px #ff9500; }
  100% { background-color: #ff7f00; box-shadow: 0 0 3px #ff7f00; }
}

.redlight {
  border-radius: 50%;
  padding: 0px; 
  width: 300px;
  height: 300px;  
  margin:auto;
  visibility:hidden;
  animation: glowing2 2500ms infinite;
}

@keyframes glowing2 {
  0% { background-color: #cc0000; box-shadow: 0 0 3px #cc0000; }
  50% { background-color: #ff0000; box-shadow: 0 0 40px #ff0000; }
  100% { background-color: #cc0000; box-shadow: 0 0 3px #cc0000; }
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  margin: 0 auto;
}

td {
  padding: 20px;
  text-align: center;    
}

.button1 {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 35px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button2 {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

<table style="width:60%">
    <tr>
        <td colspan="1">
            <div id="amberlight" class="amberlight"></div>
        </td>
        <td colspan="3">
            <div id="redlight" class="redlight"></div>
        </td>
    </tr>
    <tr>
        <td width="50%">
            <button id="startButton" onclick="timedText()" class="button1">Start</button>
            <button onclick="myStopFunction()" class="button2">Stop/Reset</button>
        </td>
        <td width="20%">
            <div>Time for Amber Light</div>
            <select id="amberTime">
                <option value="5" selected="selected">5 Seconds</option>
                <option value="10">10 Seconds</option>
                <option value="15">15 Seconds</option>
            </select>
        </td>
        <td width="20%">
            <div>Time for Red Light</div>
            <select id="redTime">
                <option value="5">5 Seconds</option>
                <option value="10" selected="selected">10 Seconds</option>
                <option value="15">15 Seconds</option>
            </select>
        </td>
        <td width="10%">
            <div>Test</div>
            <button onclick="myTimeout1()">1</button>
            <button onclick="myTimeout2()">2</button>
        </td>
    </tr>
</table>

Answer 1

使用图像+滤镜的写实灯

如果你想要一个真实的外观，更简单的方法是使用CSS filters在准备好的图像上。

过滤函数:

• hue-rotate()您可以使用此滤镜功能让您的图像看起来会变色
• saturate()改变饱和度，使其或多或少饱和
• brightness()和 contrast()您可以通过更改这两个函数来伪造曝光。
• blur()您也可以应用轻微的模糊，因为曝光过度的照片通常会失焦。

还有

• 为了获得更好的效果，只裁剪您想让它发光的部分。

• 将其他部分切片并叠加，然后使用 position: absolute

• 您可以使用其他 div 叠加图像，使用绝对定位来组合具有渐变和不透明度的效果，以产生“发光”效果。

• 您可以使用 CSS transitions或 animations以获得流畅的动画效果。

img {
  animation-duration: 5s;
  animation-name: anim;
  animation-iteration-count: infinite;
  -animation-direction: alternate;
  animation-timing-function: ease-in;
}

@keyframes anim {
  0% {
    filter: blur(0px) hue-rotate(0deg) saturate(0.5) brightness(0.9) contrast(1.2);
  }
  10% {
    filter: blur(1px) hue-rotate(20deg) saturate(1) brightness(3) contrast(2);
  }
  30% {
    filter: blur(0px) hue-rotate(0deg) saturate(0.5) brightness(0.9) contrast(1.2);
  }
  
  
  31% {
    filter: blur(0px) hue-rotate(-20deg) saturate(0.5) brightness(0.9) contrast(1.2);
  }
  40% {
    filter: blur(1px) hue-rotate(-20deg) saturate(1) brightness(2) contrast(2);
  }
  60% {
    filter: blur(0px) hue-rotate(-20deg) saturate(0.5) brightness(0.9) contrast(1.2);
  }
  
  61% {
    filter: blur(0px) hue-rotate(90deg) saturate(0.5) brightness(0.9) contrast(1.2);
  }
  70% {
    filter: blur(1px) hue-rotate(90deg) saturate(1) brightness(2) contrast(2);
  }
  100% {
    filter: blur(0px) hue-rotate(90deg) saturate(0.5) brightness(0.9) contrast(1.2);
  }
}

<img src="http://www.truck-lite.com/DAMRoot/WebLarge/10002/44276YF.jpg" width="200">

CSS 渐变+阴影+滤镜

将我的答案与改进的 Gershom 结合起来，您可以存档此效果

body{
  background: gray;
}

.blink {
  animation-duration: 0.5s;
  animation-name: anim;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in;
}

@keyframes anim {
  0% {
    filter: blur(0px) hue-rotate(-10deg) saturate(0.9) brightness(0.5) contrast(1.5);
  }
  100% {
    filter: blur(2px) hue-rotate(20deg) saturate(1) brightness(1.2) contrast(1.5);
    
      box-shadow:
  inset 3px 0px 10px rgba(255, 255, 255, 0.5),
  inset 10px 10px 50px rgba(255, 255, 255, 0.2),
  inset -10px -10px 50px rgba(0, 0, 0, 0.25),
  0px 0px 10px rgba(0, 0, 0, 0.3),
  0px 0px 50px 10px rgba(255,180,0,1);
  }
}


.light {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
  border-radius: 100%;
  background-image: linear-gradient(45deg, #ff8000, #ffa040);
  background-repeat: repeat;
  background-size: 20px 20px;
  transform: rotate(45deg);
  /* shadows for 3d effect */
  box-shadow:
  inset 3px 0px 10px rgba(255, 255, 255, 0.5),
  inset 10px 10px 50px rgba(255, 255, 255, 0.2),
  inset -10px -10px 50px rgba(0, 0, 0, 0.25),
  0px 0px 10px rgba(0, 0, 0, 0.3);
}


/* glow */
.light:after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  border-radius: 100%;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 100, 0.3) 0%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 10%, rgba(255, 255, 255, 0) 100%);
}

<div class="light blink"></div>