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;
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！