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

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

文字闪烁效果 CSS + HTML的更多相关文章

  1. css动画 文字闪烁效果

    /*定义页面基础CSS*/ body{ font-family: 'microsoft yahei',Arial,sans-serif; color: #EFEFEF; background: #22 ...

  2. css文字闪烁效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 文字分列 CSS属性

    column 这里有一系列新的CSS属性,可以帮助你很轻松的实现文字的多列布局.让我们瞧瞧: .three-column { padding: 1em; -moz-column-count: 3; - ...

  4. 省略文字的css

    在显示一行文字时,如果容器太小,为了显示出省略字符,可以使用 ellipsis { white-space: nowrap; overflow: hidden; text-overflow: elli ...

  5. 文本框文字垂直居中 CSS

    <html> <head> <style type="text/css"> #text { height:20px; vertical-alig ...

  6. 文字描边css

    -webkit-text-stroke: 3.3px #2A75BF; -webkit-text-fill-color:#fff; 该方法在安卓端貌似不支持,显示为一团 或: -webkit-text ...

  7. 点亮文字（CSS）

    html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8& ...

  8. 两边是线 ，中间是文字 的CSS写法 而且还是自适应的

  9. 一段隐藏文字的css代码，记录下

    <span style="width:1px; height:1px; color:#fff; outline-width:hidden; overflow:hidden; displ ...

随机推荐

  1. 【Azure 应用服务】备份网站时由于文件太大了，导致应用服务备份失败。如何解决？

    问题描述 备份网站时由于文件太大了,导致应用服务备份失败.如何解决呢? 问题分析 App Service (应用服务)的备份功能有10GB大小的限制,超过了是无法备份成功的并且该限制是无法扩大的.查看 ...

  2. PostMessage xss学习和挖掘

    PostMessage xss很有趣,在国外出现了很多次,国内src/众测从没遇到过,挖到过.可能境界还不够,有机会再去试试.好几年前记得心血来潮学过一次,都是半知半解,后来因为重要性不高,不了了之了 ...

  3. Spring Boot的自动配置原理及启动流程源码分析

    概述 Spring Boot 应用目前应该是 Java 中用得最多的框架了吧.其中 Spring Boot 最具特点之一就是自动配置,基于Spring Boot 的自动配置,我们可以很快集成某个模块, ...

  4. [C#] NAudio 库的各种常用使用方式: 播放 录制 转码 音频可视化

    概述 在 NAudio 中, 常用类型有 WaveIn, WaveOut, WaveStream, WaveFileWriter, WaveFileReader 以及接口: IWaveProvider ...

  5. php变量的命名规则

    php变量的命名规则 1.变量以美元符号$开头.如$name,$age: 2.美元符号$后面的第一个字符不可以是数字: 3.除了下划线_外,变量不允许出现任何空格或者标点符号: 4.PHP变量名是区分 ...

  6. 【Springboot项目启动异常】项目启动,数据库连接异常

    今天使用Springboot 整合 MybatisPlus 准备写一个Demo,在项目启动时,频繁出错,在此记录整个问题的解决过程 问题如下图 人工翻译一遍,主要意思就是没有检测到数据库驱动,也就是说 ...

  7. 缓冲区溢出之栈溢出利用（手动编写无 payload 的 Exploit）

    0x01 介绍 Exploit 的英文意思就是利用,它在黑客眼里就是漏洞利用.有漏洞不一定就有Exploit(利用),有Exploit就肯定有漏洞.编写缓冲区溢出的Exploit分为3个方面:漏洞溢出 ...

  8. mimikatz的使用

    mimikatz mimikatz是法国人Gentil Kiwi编写的一款Windows平台下的神器,它具备很多功能,其中最主要的功能是直接从 lsass.exe 进程里获取处于active状态账号的 ...

  9. LeetCode---42. 接雨水 (hard)

    题目:42. 接雨水 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 示例: 输入:height = [0,1,0,2,1,0,1,3,2,1,2, ...

  10. 【python】Leetcode每日一题-扰乱字符串

    [python]Leetcode每日一题-扰乱字符串 [题目描述] 使用下面描述的算法可以扰乱字符串 s 得到字符串 t : 如果字符串的长度为 1 ,算法停止 如果字符串的长度 > 1 ,执行 ...