zoukankan      html  css  js  c++  java
  • 如何用纯 CSS 创作牛奶文字变换效果

    效果预览

    在线演示

    按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

    https://codepen.io/comehope/pen/MGNWOm

    可交互视频教程

    此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

    请用 chrome, safari, edge 打开观看。

    https://scrimba.com/p/pEgDAM/cvPryA6

    源代码下载

    本地下载

    每日前端实战系列的全部源代码请从 github 下载:

    https://github.com/comehope/front-end-daily-challenges

    代码解读

    定义 DOM,容器中包含 2 段文本:

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

    居中显示:

    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    

    设置字体样式:

    p {
        color: white;
        font-size: 100px;
        font-weight: bold;
        font-family: sans-serif;
        text-transform: uppercase;
        text-align: center;
    }
    

    让 2 段文本重叠:

    p {
        margin: 0;
    }
    
    p:nth-child(1) {
        transform: translateY(50%);
    }
    
    p:nth-child(2) {
        transform: translateY(-50%);
    }
    

    定义动画,让 2 段文本交替显示:

    p {
        animation: show-hide 10s infinite;
        filter: opacity(0);
    }
    
    p:nth-child(1) {
        animation-direction: normal;
    }
    
    p:nth-child(2) {
        animation-direction: reverse;
    }
    
    @keyframes show-hide {
        0% {
            filter: opacity(0);
        }
    
        25% {
            filter: opacity(1);
        }
    
        40% {
            filter: opacity(1);
        }
    
        50% {
            filter: opacity(0);
        }
    }
    

    增加字间距的变化效果:

    @keyframes show-hide {
        0% {
            filter: opacity(0);
            letter-spacing: -0.8em;
        }
    
        25% {
            filter: opacity(1);
        }
    
        40% {
            filter: opacity(1);
        }
    
        50% {
            filter: opacity(0);
            letter-spacing: 0.24em;
        }
    }
    

    增加文本模糊效果:

    @keyframes show-hide {
        0% {
            filter: opacity(0) blur(0.08em);
            letter-spacing: -0.8em;
        }
    
        25% {
            filter: opacity(1) blur(0.08em);
        }
    
        40% {
            filter: opacity(1) blur(0.24em);
        }
    
        50% {
            filter: opacity(0) blur(0.24em);
            letter-spacing: 0.24em;
        }
    }
    

    最后,为容器设置对比度滤镜:

    .container {
        filter: contrast(10);
        background-color: black;
        overflow: hidden;
    }
    

    大功告成!

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

  • 相关阅读:
    Shell脚本实现用户数据导入
    Sping Cloud 微服务框架学习
    Redis学习笔记
    HTML+CSS实现简单三级菜单
    CSS Float浮动所带来的奇怪现象
    CSS如何清除浮动流的多种方案
    ECMAScript/JS 基础知识讲解
    Python的生成器
    Python包的导入说明
    Paramiko模块简单使用
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9999783.html
Copyright © 2011-2022 走看看