• 如何用纯 CSS 创作一个文本淡入淡出的 loader 动画


    效果预览

    在线演示

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

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

    可交互视频

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

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

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

    源代码下载

    本地下载

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

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

    代码解读

    定义 dom,容器是包含 7 个子元素,每个子元素中有一个字母:

    <div class="loader">
        <span>l</span>
        <span>o</span>
        <span>a</span>
        <span>d</span>
        <span>i</span>
        <span>n</span>
        <span>g</span>
    </div>
    

    居中显示:

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

    设置容器尺寸:

    .loader {
         40em;
        height: 3em;
    }
    

    设置文字样式:

    .loader {
        color: dodgerblue;
        font-size: 1.5em;
        text-transform: uppercase;
        font-family: sans-serif;
    }
    

    给文字增加渐隐渐显动画:

    .loader span {
        animation: moving 2s linear infinite;
    }
    
    @keyframes moving {
        0% {
            filter: opacity(0);
        }
    
        33% {
            filter: opacity(1);
        }
    
        66% {
            filter: opacity(1);
        }
    
        100% {
            filter: opacity(0);
        }
    }
    

    设置动画延时,增强动画效果:

    .loader span {
        animation-delay: calc((var(--n) - 10) * 0.2s)
    }
    
    .loader span:nth-child(1) {
        --n: 1;
    }
    
    .loader span:nth-child(2) {
        --n: 2;
    }
    
    .loader span:nth-child(3) {
        --n: 3;
    }
    
    .loader span:nth-child(4) {
        --n: 4;
    }
    
    .loader span:nth-child(5) {
        --n: 5;
    }
    
    .loader span:nth-child(6) {
        --n: 6;
    }
    
    .loader span:nth-child(7) {
        --n: 7;
    }
    

    设置文字旋转效果:

    .loader {
        position: relative;
    }
    
    .loader span {
        position: absolute;
        height: 3em;
    }
    
    @keyframes moving {
        0% {
            filter: opacity(0);
            transform: rotate(-180deg);
        }
    
        33% {
            filter: opacity(1);
            transform: rotate(0deg);
        }
    
        66% {
            filter: opacity(1);
            transform: rotate(0deg);
        }
    
        100% {
            filter: opacity(0);
            transform: rotate(180deg);
        }
    }
    

    增加文字移动的效果:

    @keyframes moving {
        0% {
            filter: opacity(0);
            transform: rotate(-180deg);
            left: 100%;
        }
    
        33% {
            filter: opacity(1);
            transform: rotate(0deg);
            left: 60%;
        }
    
        66% {
            filter: opacity(1);
            transform: rotate(0deg);
            left: 40%;
        }
    
        100% {
            filter: opacity(0);
            transform: rotate(180deg);
            left: 0;
        }
    }
    

    增加文字变色效果:

    .loader {
        animation: change-color 10s linear infinite;
    }
    
    @keyframes change-color {
        0% {
            color: dodgerblue;
        }
    
        20% {
            color: hotpink;
        }
    
        40% {
            color: gold;
        }
    
        60% {
            color: mediumpurple;
        }
    
        80% {
            color: lightgreen;
        }
    
        100% {
            color: dodgerblue;
        }
    }
    

    最后,把可能出现在页面外的部分隐藏掉:

    body {
        overflow: hidden;
    }
    

    大功告成!

    原文地址:https://segmentfault.com/a/1190000015305861
  • 相关阅读:
    TP5中的小知识
    php中Redis的扩展
    html js css压缩工具 可以实现代码压缩
    Python 基础
    操作系统简介
    计算机硬件
    Linux命令 比较文件
    Linux命令 查看及修改文件属性
    Linux命令 文件备份归档恢复
    Linux命令 文件的建立移动删除
  • 原文地址:https://www.cnblogs.com/lalalagq/p/10011874.html
Copyright © 2020-2023  润新知