使用CSS3 clip-path实现的标题文本水纹波动动画特效

html5, css3, 文本特效

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    font-family: 'Microsoft Yahei', sans-serif;
}
.panel {
    overflow: auto;
    width: 100%;
    height: 100vh;
    position: relative;
    background: radial-gradient(circle, #0e0e0e 15%, #010101);
}
.wow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 10vmin;
    color: #fff;
    line-height: .85;
    text-transform: uppercase;
    background-image: url(/uploads/161001/lighten2.jpg);
    background-size: contain;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.1);
    -webkit-background-clip: text;
    z-index: 10;
}
.wow:before {
    content: 'www';
    display: table;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.5vmin;
    color: white;
    -webkit-text-fill-color: white;
    -webkit-background-clip: none;
    background-color: red;
    padding: 3px;
}
.wow + .wow {
    -webkit-text-fill-color: red;
    z-index: 20;
    animation: meh 3s ease-out infinite alternate;
}
@keyframes meh {
    from {
        clip-path: polygon(100% 0, 100% 100%, 20% 100%, 61% 91%, 94% 47%);
    }
    50% {
        clip-path: polygon(100% 0, 100% 100%, 20% 100%, 59% 52%, 74% 13%);
    }
    to {
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 85%, 87% 41%);
    }
}
.jj span {
    display: block;
}

body{margin: 0;}

HTML

html5, css3, 文本特效

编辑器支持Emmet

快捷键

html5, css3, 文本特效

使用CSS3 clip-path实现的页面布局文本特效

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：