html 浏览器标题特效,HTML5/CSS3页面标题的像素溶解特效

CSS

语言：

CSSSCSS

确定

@import url("https://fonts.googleapis.com/css?family=Kumar+One|Roboto:100");

* {

box-sizing: border-box;

}

html,

body {

margin: 0;

padding: 0;

width: 100%;

}

header {

position: relative;

min-height: 60%;

min-height: 60vh;

background-color: inherit;

width: 100%;

padding: 20vh 10vw;

margin: 0;

text-rendering: optimizeLegibility;

text-align: center;

}

section {

margin: 0;

padding: 3vw 24vw;

min-height: 100%;

min-height: 100vh;

width: 100%;

}

.intro {

background-color: blue;

}

.page-title {

width: 88%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

h1 {

font-family: 'Kumar One', serif;

font-size: 9vw;

text-align: center;

font-weight: 300;

line-height: 0.9;

color: white;

letter-spacing: -0.05em;

}

h1:after {

content: '';

display: block;

position: absolute;

left: 0;

bottom: 0;

height: 160%;

width: 100%;

background-color: blue;

-webkit-mask: url(/uploads/161201/mask.png);

mask: url(/uploads/161201/mask.png);

-webkit-mask-position: bottom;

mask-position: bottom;

-webkit-mask-size: contain;

mask-size: contain;

-webkit-mask-repeat: repeat-x;

mask-repeat: repeat-x;

image-rendering: optimizeSpeed;

image-rendering: -moz-crisp-edges;

image-rendering: -o-crisp-edges;

image-rendering: -webkit-optimize-contrast;

image-rendering: optimize-contrast;

-ms-interpolation-mode: nearest-neighbor;

}

h2 {

font-family: 'Roboto', sans-serif;

font-weight: 100;

color: white;

font-size: 3vw;

text-align: center;

margin: 1.3em 0;

padding: 0;

z-index: 100;

}

h2:after {

content: '';

display: block;

width: 7vw;

height: 4px;

border-bottom: 1px solid white;

margin: 20px auto 0 auto;

}

p {

font-family: 'Roboto', sans-serif;

font-weight: 100;

color: white;

font-size: 2vw;

line-height: 1.3;

margin-bottom: 2em;

}

a {

color: white;

text-decoration: none;

border-bottom: 1px dashed rgba(255, 255, 255, 0.7);

}

a:hover {

border-bottom: 1px solid white;

}