HTML5/CSS3雾状波动的文本效果

使用text-shadow和@keyframes动画序列实现。

CSS3，文本特效

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #CCD0D4;
}
h1.load {
    text-align: center;
    text-transform: uppercase;
    font-family: 'Nunito', sans-serif;
    font-size: 4.6875em;
    color: transparent;
    letter-spacing: 0.01em;
}
.load span {
    text-shadow: 0 0 2px rgba(204, 208, 212, 0.9), 0 15px 25px rgba(0, 0, 0, 0.3), 0 -2px 3px rgba(0, 0, 0, 0.1), 0 -5px 10px rgba(255, 255, 255, 0.5), 0 5px 10px rgba(0, 0, 0, 0.3), 0 3px 4px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.45);
    animation: loading 1.20s ease-in-out infinite alternate;
}
@keyframes loading {
    to {
        text-shadow: 0 0 2px rgba(204, 208, 212, 0.2), 0 0 3px rgba(0, 0, 0, 0.02), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0);
    }
}
.load span:nth-child(2) {
    animation-delay: 0.15s;
}
.load span:nth-child(3) {
    animation-delay: 0.30s;
}
.load span:nth-child(4) {
    animation-delay: 0.45s;
}
.load span:nth-child(5) {
    animation-delay: 0.60s;
}
.load span:nth-child(6) {
    animation-delay: 0.75s;
}
.load span:nth-child(7) {
    animation-delay: 0.90s;
}
.load span:nth-child(8) {
    animation-delay: 1.05s;
}
.load span:nth-child(9) {
    animation-delay: 1.20s;
}

HTML

使用text-shadow和@keyframes动画序列实现。

CSS3，文本特效

编辑器支持Emmet

快捷键

使用text-shadow和@keyframes动画序列实现。

CSS3，文本特效

CSS3 3D阶梯文本悬停效果

CSS3 文本特效 - 风之阴影

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：