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

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

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;

}

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

Cartoon Effect

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

.cartoon-transition {

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

color: #eeeeee;

}

.cartoon-transition h1, .cartoon-transition h2 {

margin-bottom: .4em;

font-size: 4rem;

font-weight: 700;

font-family: "Boogaloo", serif;

}

.cartoon-transition .cd-btn {

background: #f0ce00;

color: #0d2228;

border-radius: 8px;

}

.cartoon-transition .cd-main-content {

background: #256276;

}

.cartoon-transition .cd-modal {

background: #f55850;

}

.cartoon-transition .cd-modal .modal-content {

color: #eeeeee;

}

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

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

background: #eeeeee;

}

.cartoon-transition .cd-modal .modal-close {

background: #d04b44;

}

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

background: #ac3e38;

}

.cartoon-transition .cd-transition-layer .bg-layer {

/* sprite composed of 25 frames */

width: 2500%;

background-image: url(9-cartoon.png);

}

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

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

}

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

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

}

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

.cartoon-transition h1, .cartoon-transition h2 {

font-weight: 300;

}

.cartoon-transition h1 {

font-size: 8rem;

}

.cartoon-transition h2 {

font-size: 6rem;

}

}

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

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%);

}

}

سون لرن • آموزش...