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

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

Answer 2

Try the following JS fiddle to get the desired behaviour like the 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;
}