HTML5 Password Unlock Animation

HTML5 Password Unlock Animation: BY Frank15 Jan,2021; Tags:
HTML5 Animation

Introduction

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.

Instructions

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

VIEW NOW