استایل زیبا برای لایت باکس - Modal Animation (نمونه 4) : باز شدن شبیه به انفجار

* {

box-sizing: border-box;

padding: 0;

margin: 0;

}

html, body {

min-height: 100%;

height: 100%;

background-image: url(http://theartmad.com/wp-content/uploads/Dark-Grey-Texture-Wallpaper-5.jpg);

background-size: cover;

background-position: top center;

font-family: helvetica neue, helvetica, arial, sans-serif;

font-weight: 200;

}

html.modal-active, body.modal-active {

overflow: hidden;

}

.button {

display: inline-block;

text-align: center;

padding: 10px 15px;

margin: 10px;

background: red;

font-size: 18px;

background-color: #efefef;

border-radius: 3px;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

cursor: pointer;

}

.button:hover {

color: white;

background: #009bd5;

}

#modal-container {

position: fixed;

display: table;

height: 100%;

width: 100%;

top: 0;

left: 0;

transform: scale(0);

z-index: 1;

}

#modal-container .modal-background {

display: table-cell;

background: rgba(0, 0, 0, 0.8);

text-align: center;

vertical-align: middle;

}

#modal-container .modal-background .modal {

background: white;

padding: 50px;

display: inline-block;

border-radius: 3px;

font-weight: 300;

position: relative;

}

#modal-container .modal-background .modal h2 {

font-size: 25px;

line-height: 25px;

margin-bottom: 15px;

}

#modal-container .modal-background .modal p {

font-size: 18px;

line-height: 22px;

}

#modal-container .modal-background .modal .modal-svg {

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

border-radius: 3px;

}

#modal-container .modal-background .modal .modal-svg rect {

stroke: #fff;

stroke-width: 2px;

stroke-dasharray: 778;

stroke-dashoffset: 778;

}

#modal-container.four {

z-index: 0;

transform: scale(1);

}

#modal-container.four .modal-background {

background: rgba(0, 0, 0, 0.7);

}

#modal-container.four .modal-background .modal {

animation: blowUpModal 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

#modal-container.four + .content {

z-index: 1;

animation: blowUpContent 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

#modal-container.four.out .modal-background .modal {

animation: blowUpModalTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

#modal-container.four.out + .content {

animation: blowUpContentTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

@keyframes blowUpModal {

0% {

transform: scale(0);

}

100% {

transform: scale(1);

}

}

@keyframes blowUpModalTwo {

0% {

transform: scale(1);

opacity: 1;

}

100% {

transform: scale(0);

opacity: 0;

}

}

@keyframes blowUpContent {

0% {

transform: scale(1);

opacity: 1;

}

99.9% {

transform: scale(2);

opacity: 0;

}

100% {

transform: scale(0);

}

}

@keyframes blowUpContentTwo {

0% {

transform: scale(2);

opacity: 0;

}

100% {

transform: scale(1);

opacity: 1;

}

}

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