HOME  >   HTML5 CANVAS  >   HTML5 Password Unlock Animation
HTML5 Password Unlock Animation
BY Frank15 Jan,2021
Tags:

This is a password unlock animation based on HTML5 and CSS3 and will make a sound when the password is selected and a triumphant sound if the password is correct. The password picking interface looks gorgeous through CSS3 rendering, and you can switch between digital passwords by sliding the numbers with the mouse, or switch the numbers with the left and right buttons.

Advertisement

HTML5 Password Unlock Animation
HTML Body Code
<div class="row">
      <div class="cell">
        <div class="text">0</div>
      </div>
      <div class="cell">
        <div class="text">1</div>
      </div>
      <div class="cell">
        <div class="text">2</div>
      </div>
      <div class="cell">
        <div class="text">3</div>
      </div>
      <div class="cell">
        <div class="text">4</div>
      </div>
      <div class="cell">
        <div class="text">5</div>
      </div>
      <div class="cell">
        <div class="text">6</div>
      </div>
      <div class="cell">
        <div class="text">7</div>
      </div>
      <div class="cell">
        <div class="text">8</div>
      </div>
      <div class="cell">
        <div class="text">9</div>
      </div>
    </div>                        
Css Code
.lock {
  background: #000;
  border-bottom: 1px solid #262626;
  border-left: 1px solid #262626;
  -webkit-box-shadow: -1px 1px 0 #0f0f0f, -2px 2px 0 #0d0d0d, -3px 3px 0 #0a0a0a, -4px 4px 0 #080808, -8px 8px 16px rgba(0, 0, 0, 0.5);
          box-shadow: -1px 1px 0 #0f0f0f, -2px 2px 0 #0d0d0d, -3px 3px 0 #0a0a0a, -4px 4px 0 #080808, -8px 8px 16px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 20;
}
.lock:before {
  background: -webkit-gradient(linear, left top, right top, from(#262626), to(#595959));
  background: linear-gradient(90deg, #262626 0%, #595959 100%);
  content: '';
  height: 1px;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.lock:after {
  background: -webkit-gradient(linear, left bottom, left top, from(#262626), to(#595959));
  background: linear-gradient(0deg, #262626 0%, #595959 100%);
  bottom: 0;
  content: '';
  height: 100%;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
}

.screen {
  background: #000;
  height: 40px;
  position: relative;
}                        
Js Code
{
    key: 'onResize',
    value: function onResize() {
      if (window.innerWidth % 2 === 0) {
        this.dom.lock.style.marginLeft = '0px';
      } else {
        this.dom.lock.style.marginLeft = '1px';
      }
    }
  }, {
    key: 'onChange',
    value: function onChange() {
      this.sounds.select.play();
      this.code = this.getCode();
      this.dom.code.textContent = this.code;
      if (this.code === this.pin) {
        this.verified = true;
        this.dom.lock.classList.add('verified');
        this.dom.status.textContent = 'UNLOCKED';
        this.sounds.success.play();
      } else {
        this.dom.lock.classList.remove('verified');
        this.dom.status.textContent = 'LOCKED';
        if (this.verified) {
          this.sounds.fail.play();
        }
        this.verified = false;
      }
    }
  }                        

Advertisement