文字闪烁效果 CSS + HTML

文字闪烁效果 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>

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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页