jquery - 使用 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>

I am capturing a picture using getUserMedia and an HTML5 on button 'Click!'. I need native camera like flash on the screen when the button is clicked. I tried using the code above, but it still lacks that feel. Try the following link, I want an effect similar to this: Demo

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(/image/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>