HTML5/CSS3页面标题的像素溶解特效

Pixel dissolve effect page title, 使用CSS3遮罩特性（mask）实现。

CSS3, 文本特效

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 3203
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@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;
}

HTML

Pixel dissolve effect page title, 使用CSS3遮罩特性（mask）实现。

CSS3, 文本特效

编辑器支持Emmet

快捷键

Pixel dissolve effect page title, 使用CSS3遮罩特性（mask）实现。

CSS3, 文本特效

HTML5 CSS3一款很棒的文本溶解过渡动画特效

HTML5/CSS3很棒的一款提示用户向下滚动页面的箭头动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：