html5 猫 特效,html5特效-css3页面元素切换墨水喷墨效果

css3页面元素切换墨水喷墨效果，层元素弹出关闭时超好看的墨水喷墨特效，下载：层元素弹出关闭时超好看的墨水喷墨特效完整源码下载  密码: qm34

下面是预览图

CSS3墨水喷墨特效

style.css代码部分：

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

Primary style

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

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

box-sizing: border-box;

}

html {

font-size: 62.5%;

}

body {

font-size: 1.6rem;

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

color: #242322;

background-color: #ffffff;

}

a {

color: #a5c4bc;

text-decoration: none;

}

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

Patterns - reusable parts of our design

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

.cd-btn {

display: inline-block;

padding: 1.6em 2.4em;

font-size: 1.4rem;

letter-spacing: .15em;

color: #ffffff;

font-weight: 700;

text-transform: uppercase;

background-color: #a5c4bc;

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

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

-webkit-transition: box-shadow 0.3s;

-moz-transition: box-shadow 0.3s;

transition: box-shadow 0.3s;

}

.no-touch .cd-btn:hover {

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

}

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

Typography

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

h1 {

font-size: 2.6rem;

line-height: 1;

margin-bottom: 1em;

font-family: "IM Fell Double Pica", serif;

font-style: italic;

}

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

h1 {

font-size: 5rem;

}

}

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

Main Content

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

.cd-main-content {

position: relative;

z-index: 1;

width: 100%;

height: 100vh;

/* vertically align its content */

display: table;

background-color: #e4dcca;

}

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

background: #402f44 url(../img/modal-bg.jpg) no-repeat center center;

background-size: cover;

opacity: 0;

visibility: hidden;

-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;

-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;

transition: opacity 0.3s 0s, visibility 0s 0.3s;

}

.cd-modal .modal-content {

height: 100%;

overflow-y: auto;

padding: 3em 5%;

color: #e4dcca;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.cd-modal h1 {

text-align: center;

}

.cd-modal h1::after {

/* ink/brush separation */

content: '';

display: block;

width: 130px;

height: 18px;

background: url(../img/ink-separation.svg) no-repeat center center;

margin: .2em auto 0;

}

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

background: rgba(0, 0, 0, 0.3) url(../img/cd-icon-close.svg) no-repeat center center;

/* image replacement */

overflow: hidden;

text-indent: 100%;

white-space: nowrap;

visibility: hidden;

opacity: 0;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-ms-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;

-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;

transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;

}

.no-touch .cd-modal .modal-close:hover {

background-color: rgba(0, 0, 0, 0.5);

}

.cd-modal.visible {

opacity: 1;

visibility: visible;

-webkit-transition: opacity 0.7s, visibility 0s;

-moz-transition: opacity 0.7s, visibility 0s;

transition: opacity 0.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;

-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;

-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;

transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;

-webkit-transform: scale(1);

-moz-transform: scale(1);

-ms-transform: scale(1);

-o-transform: scale(1);

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

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

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

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

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

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

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

height: 100%;

/* our sprite is composed of 25 frames */

width: 2500%;

background: url(../img/ink.png) no-repeat 0 0;

background-size: 100% 100%;

}

.cd-transition-layer.visible {

opacity: 1;

visibility: visible;

}

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

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

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

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

-webkit-animation-fill-mode: forwards;

-moz-animation-fill-mode: forwards;

animation-fill-mode: forwards;

}

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

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

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

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

-webkit-animation-fill-mode: forwards;

-moz-animation-fill-mode: forwards;

animation-fill-mode: forwards;

}

.no-cssanimations .cd-transition-layer {

display: none;

}

@-webkit-keyframes cd-sequence {

0% {

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

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

}

100% {

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

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

}

}

@-moz-keyframes cd-sequence {

0% {

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

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

}

100% {

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

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

}

}

@keyframes cd-sequence {

0% {

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

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

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

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

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

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

}

100% {

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

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

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

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

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

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

}

}

@-webkit-keyframes cd-sequence-reverse {

0% {

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

}

100% {

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

}

}

@-moz-keyframes cd-sequence-reverse {

0% {

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

}

100% {

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

}

}

@keyframes cd-sequence-reverse {

0% {

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

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

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

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

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

}

100% {

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

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

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

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

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

}

}