افکت زیبا برای modal تمام صفحه- Animated transition effects ( نمونه 2) : افکت Fire Extinguisher

ساخت وبلاگ

/* --------------------------------

Primary style

-------------------------------- */

*, *::after, *::before {

  box-sizing: border-box;

}

html {

  font-size: 62.5%;

}

body {

  font-size: 1.6rem;

  font-family: sans-serif;

  background-color: #ffffff;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

a {

  text-decoration: none;

}

/* --------------------------------

Shared style

-------------------------------- */

.cd-btn {

  display: inline-block;

  padding: 1.6em 2.4em;

  font-size: 1.4rem;

  letter-spacing: .15em;

  font-weight: 700;

  text-transform: uppercase;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

  transition: box-shadow .3s;

}

.cd-btn:hover {

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);

}

h1 {

  line-height: 1;

}

/* Main Content */

.cd-main-content {

  position: relative;

  z-index: 1;

  width: 100%;

  height: 100vh;

  /* vertically align its content */

  display: table;

}

.cd-main-content .center {

  /* vertically align inside parent element */

  display: table-cell;

  vertical-align: middle;

  text-align: center;

}

/* Modal Window */

.cd-modal {

  position: fixed;

  top: 0;

  left: 0;

  z-index: 3;

  height: 100%;

  width: 100%;

  overflow: hidden;

  opacity: 0;

  visibility: hidden;

  transition: opacity .3s 0s, visibility 0s .3s;

}

.cd-modal .modal-content {

  height: 100%;

  overflow-y: auto;

  padding: 3em 5%;

}

.cd-modal h1, .cd-modal h2 {

  text-align: center;

}

.cd-modal p {

  line-height: 1.6;

  margin: 2em auto;

  max-width: 800px;

}

.cd-modal .modal-close {

  /* 'X' icon */

  position: absolute;

  z-index: 1;

  top: 20px;

  right: 5%;

  height: 45px;

  width: 45px;

  border-radius: 50%;

  overflow: hidden;

  white-space: nowrap;

  text-indent: 100%;

  color: transparent;

  visibility: hidden;

  opacity: 0;

  transform: scale(0);

  transition: transform .3s 0s, visibility 0s .3s, opacity .3s 0s;

}

.cd-modal .modal-close::before, .cd-modal .modal-close::after {

  content: '';

  display: inline-block;

  position: absolute;

  height: 2px;

  width: 20px;

  top: calc(50% - 1px);

  left: calc(50% - 10px);

}

.cd-modal .modal-close::before {

  transform: rotate(45deg);

}

.cd-modal .modal-close::after {

  transform: rotate(-45deg);

}

.cd-modal.visible {

  opacity: 1;

  visibility: visible;

  transition: opacity .7s, visibility 0s;

}

.cd-modal.visible .modal-content {

  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */

  -webkit-overflow-scrolling: touch;

}

.cd-modal.visible .modal-close {

  visibility: visible;

  opacity: 1;

  transition: transform .3s 0s, visibility 0s 0s, opacity .3s 0s;

  transform: scale(1);

}

@media only screen and (min-width: 1100px) {

  .cd-modal .modal-content {

    padding: 6em 5%;

  }

  .cd-modal .modal-close {

    height: 60px;

    width: 60px;

  }

  .cd-modal .modal-close::before, .cd-modal .modal-close::after {

    height: 2px;

    width: 26px;

    top: calc(50% - 1px);

    left: calc(50% - 13px);

  }

  .cd-modal p {

    font-size: 2rem;

  }

}

/* Transition Layer */

.cd-transition-layer {

  position: fixed;

  top: 0;

  left: 0;

  z-index: 2;

  height: 100%;

  width: 100%;

  opacity: 0;

  visibility: hidden;

  overflow: hidden;

}

.cd-transition-layer .bg-layer {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translateY(-50%) translateX(-2%);

  /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */

  height: 100%;

  background-size: 100% 100%;

  background-repeat: no-repeat;

  background-position: 0 0;

}

.cd-transition-layer.visible {

  opacity: 1;

  visibility: visible;

}

.cd-transition-layer.visible .bg-layer {

  transform: translateY(-50%) translateX(-98%);

}

.cd-transition-layer.opening .bg-layer, .cd-transition-layer.closing .bg-layer {

  animation-duration: .8s;

  animation-fill-mode: forwards;

}

.no-cssanimations .cd-transition-layer {

  display: none;

}

/* --------------------------------

Fire Extinguisher Effect

-------------------------------- */

.extinguisher-transition {

  font-family: "Merriweather Sans", sans-serif;

  color: #f1faee;

}

.extinguisher-transition h1, .extinguisher-transition h2 {

  font-family: "Merriweather", serif;

  margin-bottom: .4em;

  font-size: 3.2rem;

}

.extinguisher-transition .cd-btn {

  background: #1c3458;

  color: #f1faee;

  border-radius: 50em;

}

.extinguisher-transition .cd-main-content {

  background: #e93741;

}

.extinguisher-transition .cd-modal {

  background: #f1faee;

}

.extinguisher-transition .cd-modal .modal-content {

  color: #437a9f;

}

.extinguisher-transition .cd-modal .modal-close::before,

.extinguisher-transition .cd-modal .modal-close::after {

  background: #f1faee;

}

.extinguisher-transition .cd-modal .modal-close {

  background: #cdd5ca;

}

.extinguisher-transition .cd-modal .modal-close:hover {

  background: #a9afa7;

}

.extinguisher-transition .cd-transition-layer .bg-layer {

  /* sprite composed of 25 frames */

  width: 2500%;

  background-image: url(2-extinguisher.png);

}

.extinguisher-transition .cd-transition-layer.opening .bg-layer {

  animation: cd-sequence 0.8s steps(24) forwards;

}

.extinguisher-transition .cd-transition-layer.closing .bg-layer {

  animation: cd-sequence 0.8s steps(24) forwards reverse;

}

@media only screen and (min-width: 768px) {

  .extinguisher-transition h1 {

    font-size: 6rem;

  }

  .extinguisher-transition h2 {

    font-size: 5.4rem;

    font-weight: 700;

  }

}

/* --------------------------------

Animations

-------------------------------- */

@keyframes cd-sequence {

  0% {

    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */

    transform: translateY(-50%) translateX(-2%);

  }

  100% {

    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */

    transform: translateY(-50%) translateX(-98%);

  }

}

سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 262 تاريخ : جمعه 19 خرداد 1396 ساعت: 21:59

خبرنامه