使用HTML5和jQuery在按钮单击上获得类似于照相机的快门闪光效果

Question

$('#btn').on('click', function(e) {
  $('#skm_LockPane').addClass('LockOn');
  var millisecondsToWait = 100;
  setTimeout(function() {
    $('#skm_LockPane').removeClass('LockOn');
  }, millisecondsToWait);

});

 .LockOff {
   display: none;
   visibility: hidden;
 }
 .LockOn {
   overflow: hidden;
   display: block;
   visibility: visible;
   position: absolute;
   z-index: 999;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background-color: blue;
   text-align: center;
   padding-top: 20%;
   filter: alpha(opacity=75);
   opacity: 0.5;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="skm_LockPane" class="LockOff"></div>
<button id="btn">Click!</button>

我正在使用getUserMedia“ Click！”按钮上的HTML5 捕获图片。单击按钮时，我需要屏幕上的本机摄像头（如闪光灯）。我尝试使用上面的代码，但仍然缺乏这种感觉。尝试以下链接，我想要类似的效果：演示

Answer 1

您可以使用快速的CSS过渡和声音。全屏效果更好

$('button').click(function() {
  $('#shutter').addClass('on');
  $('audio')[0].play();
  setTimeout(function() {
    $('#shutter').removeClass('on');
  }, 30*2+45);/* Shutter speed (double & add 45) */
});

body {
  background: #212121 url(https://i.stack.imgur.com/pFd9s.jpg) no-repeat 0 0 /cover;
  margin: 0;
}
#shutter {
  opacity: 0;
  transition: all 30ms ease-in;/* Shutter speed */
  position: fixed;
  height: 0%;
  width: 0%;
  pointer-events: none;

  background-color: white;/* Shutter Color */
  
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%)
}
#shutter.on {
  opacity: 1;/* Shutter Transparency */
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<audio src="http://www.soundjay.com/mechanical/camera-shutter-click-08.mp3"></audio>
<div id="shutter"></div>
<button>Click!</button>