CSS3手电筒效果

Question

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

我可以创建的所有示例以及网络上的大部分示例都是文本光效，但我想如果该演示不使用文本效果，就可以实现逼真的手电筒效果。

Answer 1

尝试codepen中的以下代码(按如下方式编辑codepen中的现有代码)以获得所需的行为

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;
}

如果您有任何问题，请告诉我...! :)