Pure CSS3 Popup Layer Plugin With Masks Tilt Cut-In Animation

Pure CSS3 Popup Layer Plugin With Masks Tilt Cut-In Animation: BY Paul7 Jan,2021; Tags:
Popup Window

Introduction

Today we want to share with you a pure CSS3 based pop-up window plug-in, this pop-up layer animation is characterized by a mask, and the transparency of the mask can be customized; another feature is that the pop-up layer in the pop-up accompanied by a tilt cut animation effects, the same pop-up layer in the closing also has the same animation effect.

Instructions

HTML Body Code

<div class="container">
  <a class="button" href="#popup">Open Modal</a>
  <div class="popup" id="popup">
    <div class="popup-inner">
      <div class="popup__photo">
        <img src="photo-1515224526905-51c7d77c7bb8.jpg" alt="">
      </div>
      <div class="popup__text">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ex velit, viverra non vulputate vitae, blandit vitae nisl. Nullam fermentum orci et erat viverra bibendum. Aliquam sed varius nibh, vitae mattis purus. Mauris elementum sapien non ullamcorper vulputate. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eget felis sit amet eros viverra pulvinar.</p>
      </div>
      <a class="popup__close" href="#">X</a>
    </div>
  </div>
</div>

Css Code

.container {
  background-color: #9191E9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100vw;
  height: 100vh;
}

.button {
  text-decoration: none;
  font-size: .875rem;
  font-weight: 300;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 1.5rem;
  background-color: #fff;
  color: #9191E9;
  padding: 1rem 2rem;
}

.popup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  overflow: hiden;
  -webkit-transition: .64s ease-in-out;
  transition: .64s ease-in-out;
}

VIEW NOW