文本遮挡渐进移除交互效果

可用于单页模板内容进入视图时的入场动画

css3, 文本效果

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
body .draw {
    position: relative;
    padding: 3px 20px;
    margin: 2px 0;
    color: transparent;
    font-size: 32px;
    font-family: 'Montserrat', sans-serif;
}
body .draw.-small {
    padding: 2px 10px;
    font-size: 14px;
}
body .draw:before {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0%;
    right: 100%;
    background-color: black;
    content: '';
}
body .draw.-do {
    -webkit-animation: show 2.5s forwards;
    animation: show 2.5s forwards;
}
body .draw.-do:before {
    -webkit-animation: intro 2.5s ease-in-out;
    animation: intro 2.5s ease-in-out;
}
body .draw.-wave:nth-child(1),
body .draw.-wave:nth-child(1)::before {
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}
body .draw.-wave:nth-child(2),
body .draw.-wave:nth-child(2)::before {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
body .draw.-wave:nth-child(3),
body .draw.-wave:nth-child(3)::before {
    -webkit-animation-delay: 1.25s;
    animation-delay: 1.25s;
}
body .draw.-wave:nth-child(4),
body .draw.-wave:nth-child(4)::before {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
body .draw.-wave:nth-child(5),
body .draw.-wave:nth-child(5)::before {
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
}
body .draw.-wave:nth-child(6),
body .draw.-wave:nth-child(6)::before {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
body .draw.-wave:nth-child(7),
body .draw.-wave:nth-child(7)::before {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
body .draw.-wave:nth-child(8),
body .draw.-wave:nth-child(8)::before {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
body .draw[delay="0.1"],
body .draw[delay="0.1"]::before {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
body .draw[delay="0.2"],
body .draw[delay="0.2"]::before {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
body .draw[delay="0.3"],
body .draw[delay="0.3"]::before {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
body .draw[delay="0.4"],
body .draw[delay="0.4"]::before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}
body .draw[delay="0.5"],
body .draw[delay="0.5"]::before {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
body .draw[delay="0.6"],
body .draw[delay="0.6"]::before {
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
body .draw[delay="0.7"],
body .draw[delay="0.7"]::before {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
body .draw[delay="0.8"],
body .draw[delay="0.8"]::before {
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
}
body .draw[delay="0.9"],
body .draw[delay="0.9"]::before {
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}
body .draw[delay="1"],
body .draw[delay="1"]::before {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
body .draw[delay="1.1"],
body .draw[delay="1.1"]::before {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}
body .draw[delay="1.2"],
body .draw[delay="1.2"]::before {
    -webkit-animation-delay: 1.7s;
    animation-delay: 1.7s;
}
body .draw[delay="1.3"],
body .draw[delay="1.3"]::before {
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}
body .draw[delay="1.4"],
body .draw[delay="1.4"]::before {
    -webkit-animation-delay: 1.9s;
    animation-delay: 1.9s;
}
body .draw[delay="1.5"],
body .draw[delay="1.5"]::before {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
body .draw[delay="1.6"],
body .draw[delay="1.6"]::before {
    -webkit-animation-delay: 2.1s;
    animation-delay: 2.1s;
}
body .draw[delay="1.7"],
body .draw[delay="1.7"]::before {
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}
body .draw[delay="1.8"],
body .draw[delay="1.8"]::before {
    -webkit-animation-delay: 2.3s;
    animation-delay: 2.3s;
}
body .draw[delay="1.9"],
body .draw[delay="1.9"]::before {
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
}
body .draw[delay="2"],
body .draw[delay="2"]::before {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
body .draw[delay="2.1"],
body .draw[delay="2.1"]::before {
    -webkit-animation-delay: 2.6s;
    animation-delay: 2.6s;
}
body .draw[delay="2.2"],
body .draw[delay="2.2"]::before {
    -webkit-animation-delay: 2.7s;
    animation-delay: 2.7s;
}
body .draw[delay="2.3"],
body .draw[delay="2.3"]::before {
    -webkit-animation-delay: 2.8s;
    animation-delay: 2.8s;
}
body .draw[delay="2.4"],
body .draw[delay="2.4"]::before {
    -webkit-animation-delay: 2.9s;
    animation-delay: 2.9s;
}
body .draw[delay="2.5"],
body .draw[delay="2.5"]::before {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
body .draw[delay="2.6"],
body .draw[delay="2.6"]::before {
    -webkit-animation-delay: 3.1s;
    animation-delay: 3.1s;
}
body .draw[delay="2.7"],
body .draw[delay="2.7"]::before {
    -webkit-animation-delay: 3.2s;
    animation-delay: 3.2s;
}
body .draw[delay="2.8"],
body .draw[delay="2.8"]::before {
    -webkit-animation-delay: 3.3s;
    animation-delay: 3.3s;
}
body .draw[delay="2.9"],
body .draw[delay="2.9"]::before {
    -webkit-animation-delay: 3.4s;
    animation-delay: 3.4s;
}
body .draw[delay="3"],
body .draw[delay="3"]::before {
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
}
@-webkit-keyframes intro {
    0% {
        left: 0%;
        right: 100%;
    }
    50% {
        left: 0%;
        right: 0%;
    }
    100% {
        left: 100%;
        right: 0%;
    }
}
@keyframes intro {
    0% {
        left: 0%;
        right: 100%;
    }
    50% {
        left: 0%;
        right: 0%;
    }
    100% {
        left: 100%;
        right: 0%;
    }
}
@-webkit-keyframes show {
    0%, 50% {
        color: transparent;
    }
    50.00001%,
    100% {
        color: black;
    }
}
@keyframes show {
    0%, 50% {
        color: transparent;
    }
    50.00001%,
    100% {
        color: black;
    }
}

HTML

可用于单页模板内容进入视图时的入场动画

css3, 文本效果

编辑器支持Emmet

快捷键

可用于单页模板内容进入视图时的入场动画

css3, 文本效果

使用CSS3模拟文本模糊、被擦除和涂抹的效果

墙壁贴纸文本效果和别针

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：