CSS3闪光灯效果

Question

有人知道如何实现CSS3手电筒效果吗？就像这个例子中一样，只有使用box shadow属性，如果要达到逼真的效果，就不需要字母-http://codepen.io/simurai/full/vwprf

我能创建的所有例子都是围绕网络的，大多是文本灯光效果，但我想如果演示不使用文本效果，就可以实现逼真的手电筒。

Answer 1

尝试代码笔中的以下代码（按如下方式编辑代码笔中现有的代码）以获得所需的行为

HTML

<div id="box">
  <p id="flashlight">
    <span id="flash">FLASH</span>
    <span id="flash">LIGHT</span>
    <span id="light">000</span>
  </p>
</div>

CSS

/* Global ------------------------------------------------------ */
html {
  overflow: hidden; /*FF fix*/
  height: 100%;
  font-family: Geneva, sans-serif;
  background: #000;
  /*background: hsl(210, 30%, 0%) radial-gradient( hsl(210, 30%, 20%), hsl(210, 30%, 0%));*/
}
body {
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
p {
    margin: 0;
}

/* box ------------------------------------------------------ */
#box {
  padding: 100px;
  text-align: center;
  min-width: 500px;
  font-size: 3em;
  font-weight: bold;
  -webkit-backface-visibility: hidden; /* fixes flashing */
}

/* flashlight ------------------------------------------------------ */
#flashlight {
  color: hsla(0,0%,0%,0);
  perspective: 20px;
  outline: none;
}

/* flash ------------------------------------------------------ */
#flash {
  display: inline-block;
  text-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -3px 2px, rgba(0,0,0,0.8) 0 30px 25px;
  transition: margin-left 0.3s cubic-bezier(0, 1, 0, 1);
}
#box:hover #flash {
  margin-left: 0px;
  transition: margin-left 1s cubic-bezier(0, 0.75, 0, 1);
}

/* light ------------------------------------------------------ */
#light {
  margin-left: 30px;
  display: inline-block;
  /*color: #000;*/
  text-shadow: #000 0 0 1px, #000 0 -1px 2px, #000 0 -3px 2px, rgba(0,0,0,0.8) 0 30px 25px;
}
#box:hover #light {
  text-shadow: #fff 0 0 18px, #fff 0 0 40px;
  transform: rotateY(-60deg);
  transition:         transform 0.3s cubic(0, 0.75, 0, 5), text-shadow 0.5s ease-out;
}

如果你有任何问题，请告诉我…！：）

Answer 2

尝试以下JS fiddle以获得所需的行为，如FLASH LIGHT

http://jsfiddle.net/arunberti/2RBkf/

#flashlight {
color: hsla(0,0%,0%,0);
-webkit-perspective: 80px;
outline: none;
}
#flash {
display: inline-block;
text-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -3px 2px, rgba(0,0,0,0.8) 0 30px 25px;
transition: margin-left 0.3s cubic-bezier(0, 1, 0, 1);
}
#light {
display: inline-block;
text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px;
}
#box:hover #light {
text-shadow: #fff 0 0 4px, red 0 0 20px;
-webkit-transform: rotateY(-60deg);
transition: -webkit-transform 0.3s cubic-bezier(0, 0.75, 0, 1), text-shadow 0.1s ease-out;
}
#box {
padding: 100px;
text-align: center;
min-width: 500px;
font-size: 3em;
font-weight: bold;
-webkit-backface-visibility: hidden;
}