当前位置 博文首页 > 小丞同学：文字闪烁效果 CSS + HTML

最大化 缩小

    小丞同学：文字闪烁效果 CSS + HTML

    作者：[db:作者] 时间：2021-07-20 18:43

    文字闪烁效果 CSS

    写在前面

    好好学习，天天向上！

    效果图

    绝美的效果
    在这里插入图片描述在这里插入图片描述

    实现过程

    1. 先给没字体添加一些普通的样式，颜色设置为透明
    2. 给文字设置一个动画效果，通过text-shadow属性来实现变亮的效果，同时通过透明色和白色的切换实现文字闪烁的效果
    3. 给每个字设置一定的动画延时，从而实现流水的效果

    代码部分

    HTML

     <div>
        <span>b</span>
        <span>l</span>
        <span>a</span>
        <span>c</span>
        <span>k</span>
        <span>p</span>
        <span>i</span>
        <span>n</span>
        <span>k</span>
 </div>

    CSS

    body {
    background-color: black;
}
div {
    margin: 200px auto;
    width: 1000px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 120px;
    color: transparent;
}
span {
    animation: shan 4s linear infinite;
    text-transform: uppercase;
}
div span:nth-child(1){
    animation-delay: 0s;
}
div span:nth-child(2){
    animation-delay: .4s;
}
div span:nth-child(3){
    animation-delay: .8s;
}
div span:nth-child(4){
    animation-delay: 1.2s;
}
div span:nth-child(5){
    animation-delay: 1.6s;
}
div span:nth-child(6){
    animation-delay: 2s;
}
div span:nth-child(7){
    animation-delay: 2.4s;
}
div span:nth-child(8){
    animation-delay: 2.8s;
}
div span:nth-child(9){
    animation-delay: 3.2s;
}
@keyframes shan {
    0% ,100%{
        color: white;
        text-shadow: 0 0 4px  pink ,
                        0 0 10px pink ,
                        0 0 20px pink ,
                        0 0 30px pink ,
                        0 0 40px pink ,
                        0 0 50px pink ,
                        0 0 60px pink ,
                        0 0 70px pink ,
                        0 0 80px pink ,
                        0 0 90px pink ,
                        0 0 100px pink;
    }
    30%,90% {
        color: transparent;
        text-shadow: none;
    }
}

    完整代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体闪烁效果</title>
    <style>
        body {
            background-color: black;
        }
        div {
            margin: 200px auto;
            width: 1000px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 120px;
            color: transparent;
        }
        span {
            animation: shan 4s linear infinite;
            text-transform: uppercase;
        }
        div span:nth-child(1){
            animation-delay: 0s;
        }
        div span:nth-child(2){
            animation-delay: .4s;
        }
        div span:nth-child(3){
            animation-delay: .8s;
        }
        div span:nth-child(4){
            animation-delay: 1.2s;
        }
        div span:nth-child(5){
            animation-delay: 1.6s;
        }
        div span:nth-child(6){
            animation-delay: 2s;
        }
        div span:nth-child(7){
            animation-delay: 2.4s;
        }
        div span:nth-child(8){
            animation-delay: 2.8s;
        }
        div span:nth-child(9){
            animation-delay: 3.2s;
        }
        @keyframes shan {
            0% ,100%{
                color: white;
                text-shadow: 0 0 4px  pink ,
                                0 0 10px pink ,
                                0 0 20px pink ,
                                0 0 30px pink ,
                                0 0 40px pink ,
                                0 0 50px pink ,
                                0 0 60px pink ,
                                0 0 70px pink ,
                                0 0 80px pink ,
                                0 0 90px pink ,
                                0 0 100px pink;
            }
            30%,90% {
                color: transparent;
                text-shadow: none;
            }
        }
    </style>
</head>
<body>
    <div>
        <span>b</span>
        <span>l</span>
        <span>a</span>
        <span>c</span>
        <span>k</span>
        <span>p</span>
        <span>i</span>
        <span>n</span>
        <span>k</span>
    </div>
</body>
</html>

    真正的才智是刚毅的志向。 —— 拿破仑

    cs
    上一篇：小丞同学：文字折叠效果
    下一篇：没有了