33.纯 CSS 创作牛奶文字变换效果

原文地址：https://segmentfault.com/a/1190000015037234

感想：transform: translateY(50% & -50%);  animation-direction: normal & reverse;

HTML code:

<div class="container">
    <p>Explorer</p>
    <p>Discovery</p>
</div>

CSS code:

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}
/* 为容器设置对比度滤镜 */
.container{
    filter: contrast(10);
    background-color: black;
    overflow: hidden;
}
p{
    margin: 0;
    color: white;
    font-size: 50px;
    font-weight: bold;
    font-family: sans-serif;
    text-transform: uppercase;
    text-align: center;
    animation: show-hide 10s infinite;
    filter: opacity(0);
}
/* 让2段文本重叠 */
p:nth-child(1){
    transform: translateY(50%);
    /* 让2段文本交替显示 */
    animation-direction: normal;
}
p:nth-child(2){
    transform: translateY(-50%);
    animation-direction: reverse;
}
@keyframes show-hide{
    0%{
        /* blur: 模糊 */
        filter: opacity(0) blur(0.08em);
        /* 增加字间距的变化效果 */
        letter-spacing: -0.8em;
    }
    25%{
        filter: opacity(1) blur(0.08em);
    }
    40%{
        filter: opacity(1) blur(0.08em);
    }
    50%{
        filter: opacity(0) blur(0.08em);
        letter-spacing: 0.24em;
    }
}