使用GIF动图和CSS3背景裁剪（background-clip）特性实现的透明文本烟雾特效

使用-webkit-background-clip: text实现把GIF图片作为透明文本的背景。

css3, 文本特效

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
    background-color: #111;
}
.title {
    font-family: "Montserrat";
    text-align: center;
    color: #FFF;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100vh;
    letter-spacing: 1px;
}
h1 {
    background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
    background-size: cover;
    color: transparent;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
    font-size: 120px;
    line-height: .75;
    margin: 10px 0;
}
/* styling my button */

.white-mode {
    text-decoration: none;
    padding: 7px 10px;
    background-color: #122;
    border-radius: 3px;
    color: #FFF;
    -webkit-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    position: absolute;
    left: 15px;
    bottom: 15px;
    font-family: "Montserrat";
}
.white-mode:hover {
    background-color: #FFF;
    color: #122;
}

HTML

使用-webkit-background-clip: text实现把GIF图片作为透明文本的背景。

css3, 文本特效

编辑器支持Emmet

快捷键

使用-webkit-background-clip: text实现把GIF图片作为透明文本的背景。

css3, 文本特效

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

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：