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

时间：2019-03-05 18:46:09

标签： javascript css

我一直在尝试构建一个非常简单的Javascript / CSS / HTML页面/应用程序，以用作语音计时器。我的计划是制造一些东西，使说话者在谈话了一段时间之后发出琥珀色的“警告灯”，然后在第二个设定的时间之后发出红色的警告灯。例如，如果语音的目标时间是10分钟，则琥珀色的灯会在大约7-8分钟的标记处显示为警告，以鼓励扬声器开始环绕，然后红色的灯会在10分钟时亮起。让演讲者知道他们已经超过了指定的时间。

无论如何-我建立了以下工具（我在一天的工作中就非常了解CSS / JavaScript，因此我为自己感到骄傲...）。

这有效（尽管出于示例目的，我将时间缩短为秒而不是分钟），但是我开始超越自己，想知道是否可以使用CSS来应用点阵/玻璃/钻石类型在我的形状上产生效果，使其看起来更像“灯状”。例如：Lamp Image

在此先感谢所有可怜的编码花样，我很抱歉。

谢谢！

Codepen此处：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>

3 个答案:

答案 0 :(得分：4)

使用图像和滤镜的逼真的灯

如果您想获得逼真的外观，更简单的方法是在准备好的图像上使用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>

答案 1 :(得分：2)

可以尝试使用background-repeat: repeat，使background-size很小，然后使用background-image: linear-gradient(45deg, ...)：

.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.2), 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%);
}
<div class="light">
</div>

在我看来，将整个物件旋转45度也有助于使它看起来可信！

您也可能会发疯，并使用关键帧来获得发光效果：

@keyframes glow {
  0% { filter: brightness(1) contrast(1); }
  50% { filter: brightness(1.1) contrast(1.1); }
  100% { filter: brightness(1) contrast(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;
  
  animation: glow 3000ms linear infinite;
  
  transform: rotate(45deg);
  
  box-shadow: 0 0 20px 2px #ff7f00;
}
<div class="light">
</div>

答案 2 :(得分：0)

感谢大家的帮助和建议。 “成品”在这里：

https://codepen.io/darossi/pen/ywgbwz 

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%;
  background-image: linear-gradient(45deg, #ff8000, #ffa040);
  background-repeat: repeat;
  background-size: 20px 20px;
  transform: rotate(45deg);
  box-shadow: 0 0 20px 2px #ff8000;
 
  padding: 0px; 
  width: 300px;
  height: 300px;  
  	margin:auto;
	visibility:hidden;
	animation: glow 2000ms linear infinite;

}
	

	
.redlight {
  border-radius: 50%;
  background-image: linear-gradient(45deg, #cc0000, #e74c4c);
  background-repeat: repeat;
  background-size: 20px 20px;
  transform: rotate(45deg);
  box-shadow: 0 0 20px 2px #cc0000;
  padding: 0px; 
  width: 300px;
  height: 300px;  
  	margin:auto;
visibility:hidden;
animation: glow 2000ms linear infinite;
  //animation: glowing2 2500ms infinite;
}

@keyframes glow {
  0% { filter: brightness(1);  }
  25% { filter: brightness(1.1);  }
 40% { filter: brightness(1.2);  }
  50% { filter: brightness(1.3); }
  60% { filter: brightness(1.2); }
  75% { filter: brightness(1.1);  }
  100% { filter: brightness(1); }
}
	


table, th, td {
  border: 0px solid black;
  border-collapse: collapse;
  margin: 0 auto;
}
td {
  padding: 10px;
  text-align: center;    
}

.button1 {
  background-color: #4CAF50;
  border-radius:8px;
  border: none;
  color: white;
  padding: 15px 35px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px 2px;
  cursor: pointer;
  width:40%;
  font-weight:bold;
}

.button2 {
  background-color: #4CAF50;
  border-radius:8px;
  border: none;
  color: white;
  padding: 15px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px 2px;
  cursor: pointer;
  width:40%;
  height:100%;
  font-weight:bold;
}

#amberTime, #redTime {
	font-size:24px;
	padding: 5px;
}

#amberTime {
	background-color: #ff8000;
	color:#ffffff;
	border:0px solid;
}

#redTime {
	background-color: #cc0000;
	color:#ffffff;
	border:0px solid;
}



.testAmber {
	background-color:#ff8000;
	border:0px solid;
	color:#ff8000;
}

.testRed {
	background-color:#cc0000;
	border:0px solid;
	color:#cc0000;
}

.bottomrow {
	border-top:20px solid #ffffff;
	background-color:#e5e5e5;
}
<table style="width:50%">
  <tr>
    <td colspan="1"><div id="amberlight" class="amberlight"></div></td>
    <td colspan="3"><div id="redlight" class = "redlight"></div></td>
  </tr>
  <tr class="bottomrow">
	<td width="50%">

		<button id="startButton" onclick="timedText()" class="button1">Start</button>
		<button onclick="myStopFunction()" class = "button2">Stop/Reset</button>
	</td>
	<td width="20%">
			<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%">
			<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()" class="testAmber">1</button>
		<button onclick="myTimeout2()" class="testRed">2</button>
	</td>

  </tr>
</table>

相关问题
最新问题