zoukankan      html  css  js  c++  java
  • 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;
        }
    }
  • 相关阅读:
    2019-8-31-C#-性能分析-反射-VS-配置文件-VS-预编译
    2018-8-10-WPF-鼠标移动到列表上-显示列表图标
    C语言对齐、补齐
    main函数前后
    Ubuntu安装telnet
    Ubuntu安装rpm
    extern c 解释
    gcc和g++编译器
    原子操作
    linux内核信号量
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10341532.html
Copyright © 2011-2022 走看看