效果图

各位朋友大家好，

今天给大家带来的是 CSS3墨水喷墨特效源码！

是不是很炫酷，大家可以按照自己的意愿进行修改！

有想要文件版源码的 可以私聊小编哦

废话不多说，上源码！

CSS:

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section, main {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: "";

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

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

}

}