使用CSS3背景裁剪（background-clip）特性实现的文本标题透视特效

Text Mask Effect，背景图片有一种科幻片外星球的感觉。

css3, 文本特效, transparent, opaque

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    margin: 0;
    padding: 0;
    font-family: 'Righteous', cursive;
}
.main {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.text {
    height: 100vh;
    width: 100%;
    background-image: url("/uploads/1708/mountain.jpg");
    background-size: 100% 100%;
    background-position: center;
    font-size: 150px;
    text-transform: uppercase;
    text-align: center;
    line-height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-top: 250px;
    -webkit-background-clip: text;
    color: transparent;
    transition: all 2.5s ease-in-out;
}
.main:hover .text {
    background-size: 80% 80%;
}
.bg {
    height: 100vh;
    width: 100%;
    background-image: url("/uploads/1708/mountain.jpg");
    background-size: 100% 100%;
    background-position: center;
    transform: rotateY(180deg);
    transition: all 2.5s ease-in-out;
}
.main:hover .bg {
    background-size: 150% 150%;
}

HTML

Text Mask Effect，背景图片有一种科幻片外星球的感觉。

css3, 文本特效, transparent, opaque

编辑器支持Emmet

快捷键

Text Mask Effect，背景图片有一种科幻片外星球的感觉。

css3, 文本特效, transparent, opaque

CSS3使用background-clip属性实现文本裁剪效果

使用CSS3裁剪路径（clip-path）属性实现燕尾形状的文本

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：