html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <p><a href="#">RED</a></p>
        <p><a href="#">BLUE</a></p>
        <p><a href="#">GREEN</a></p>
    </div>

</body>
</html>

CSS
body{
    margin: 0px;
    padding: 0px;
    background-color: #000000;
}

.container{
    width: 500px;
    margin: auto;
}
.container p{
    width: 500px;
    height: 21px;
    display: inline-block;
    margin: 20px auto;
    text-align: center;
    line-height: 21px;
}

p:nth-child(1) a{
    color:#FF1177;
    font-family:Monoton;
    font-weight: bold;
}

.container a{
    text-decoration: none;
    transition: all 0.5s;
}

a:hover{
    color: #ffffff;
}

p:nth-child(1) a:hover{
    animation: neon1 1.5s ease-in-out infinite alternate;
}

p:nth-child(2) a{
    font-size:1.5em;
    color:#228DFF;
    font-family:Iceland;
}
p:nth-child(2) a:hover{
    -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
    -moz-animation: neon2 1.5s ease-in-out infinite alternate;
    animation: neon2 1.5s ease-in-out infinite alternate;
}

p:nth-child(3) a{
    color:#FFDD1B;
    font-family:Pacifico;
}
p:nth-child(3) a:hover{
    -webkit-animation: neon3 1.5s ease-in-out infinite alternate;
    -moz-animation: neon3 1.5s ease-in-out infinite alternate;
    animation: neon3 1.5s ease-in-out infinite alternate;
}

@keyframes neon1 {
    from{
        text-shadow:    0 0 10px  #fff,
                        0 0 20px  #fff,
                        0 0 30px  #fff,
                        0 0 40px  #FF1177,
                        0 0 70px  #FF1177,
                        0 0 80px  #FF1177,
                        0 0 100px #FF1177,
                        0 0 150px #FF1177;
    }
    to{
        text-shadow: 0 0 5px #fff,
        0 0 10px #fff,
        0 0 15px #fff,
        0 0 20px #FF1177,
        0 0 35px #FF1177,
        0 0 40px #FF1177,
        0 0 50px #FF1177,
        0 0 75px #FF1177;
    }
}

@-webkit-keyframes neon2 {
    from {
        text-shadow: 0 0 10px #fff,
        0 0 20px  #fff,
        0 0 30px  #fff,
        0 0 40px  #228DFF,
        0 0 70px  #228DFF,
        0 0 80px  #228DFF,
        0 0 100px #228DFF,
        0 0 150px #228DFF;
    }
    to {
        text-shadow: 0 0 5px #fff,
        0 0 10px #fff,
        0 0 15px #fff,
        0 0 20px #228DFF,
        0 0 35px #228DFF,
        0 0 40px #228DFF,
        0 0 50px #228DFF,
        0 0 75px #228DFF;
    }
}

@-webkit-keyframes neon3 {
    from {
        text-shadow: 0 0 10px #fff,
        0 0 20px  #fff,
        0 0 30px  #fff,
        0 0 40px  #FFDD1B,
        0 0 70px  #FFDD1B,
        0 0 80px  #FFDD1B,
        0 0 100px #FFDD1B,
        0 0 150px #FFDD1B;
    }
    to {
        text-shadow: 0 0 5px #fff,
        0 0 10px #fff,
        0 0 15px #fff,
        0 0 20px #FFDD1B,
        0 0 35px #FFDD1B,
        0 0 40px #FFDD1B,
        0 0 50px #FFDD1B,
        0 0 75px #FFDD1B;
    }
}

点亮文字（CSS）的更多相关文章

  1. 文档流&文字&CSS常用命令

    文档流 文档流就是文档内元素流动方向 流动方向 内联元素从左往右流,宽度不够,之字形,且元素会被截断 块元素从上往下流动,一排一排 注意事项 内联元素中有英文单词,流动时宽度不够,英文单词会整体迁移, ...

  2. 图片文字css小知识点

    行内元素,图片和文字中间有缝隙,需要给父元素设置font-size:0: 图片和文字不对齐,给图片设置vertical-align:top 文字行高有缝隙 设置vertical-align:top  

  3. 经典的横线中间文字css布局---flex布局

    html: <div class="title"> <div class="line"></div> <div cla ...

  4. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  5. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  6. CSS样式之语法

    选择符 选择符 {属性1:属性值1;属性2:属性值2} 选择符(selector):指定样式适用的标签,除指定标签外,样式不起作用 属性:样式的关键字 属性值:描述样式的值: 格式:属性与属性之间使用 ...

  7. jQuery操作DOM和CSS函数

    function des html jquery result html() 获取元素中HTML内容 <div id="box" style="color:red& ...

  8. CSS一级导航-天蓝色（带阴影）

    一款亮丽的导航,能给网站一个画龙点睛的作用.导航在指引用户搜寻内容时,还能改变用户浏览网站的心情,浏览网站也像一场旅行,有创意的导航栏让用户欣赏起来也会更加愉悦,增加对网站的兴趣. 本人不擅长美工制作 ...

  9. 怎么修改placeholder字体的css样式

    修改palceholder内文字的css样式 ::-webkit-input-placeholder{ color: red; font-size: 20px; line-height: 50px; ...

随机推荐

  1. Vuex框架原理与源码分析

    Vuex是一个专为Vue服务,用于管理页面数据状态.提供统一数据操作的生态系统.它集中于MVC模式中的Model层,规定所有的数据操作必须通过 action - mutation - state ch ...

  2. P2679 子串 DP

    P2679 子串 DP 从字符串A中取出\(k\)段子串,按原顺序拼接,问存在多少个方案使拼接的字符串与字符串B相同 淦,又是这种字符串dp 设状态\(ans[i][j][k]\)表示A串位置\(i\ ...

  3. PHP全栈学习笔记31

    伪类:未被访问状态,已被访问状态,鼠标悬停状态,活动状态 :link 未被访问的链接添加样式 :visited 向已被访问链接添加样式 :hover 向鼠标悬停时向元素添加样式 :active 向被激 ...

  4. maven管理的jsp-web应用如何添加servlet、jsp相关依赖（org.apache.jasper.JasperException: java.lang.ClassNotFoundException: org.apache.jsp.index_jsp）

    明明tomcat下面就有这些包,然而还需要在maven依赖里面加上这个依赖 <!--引入Servlet开始--> <dependency> <groupId>jav ...

  5. VTK 简单点云数据显示绘制

    基于vtkPolyData,绘制时除了输入点坐标,还需要通过setVerts指定点绘制信息. simplePoints.txt的内容为简单的 xyz,如: 20 20 20 20 20 30 20 2 ...

  6. docker安装单机hadoop

    安装环境 centos7. docker -ce(这个安装参考我的另外一篇博客 首先关闭防火墙 systemctl stop firewalld.service #停止firewall systemc ...

  7. 关于Kernel的思考

    学习播客_KLDA(推导得很通俗,下面的推导就是源于此篇博客) 第一部分:按照自己的理解,模仿抄!学习播客来完成一下KLDA的推导. 第二部分:对于Kernel的思考 KLDA:顾名思义,就是把Ker ...

  8. little difference

    把一个数字分解成有限个相差不超过1的因子: 这里如果是2的n次幂就不可以,因为比如4,可以拆成 2,2,或者2,2,1,或者2,2,1,1,...所有这个不可以,没想到这个 数据是1E18,一开始想觉 ...

  9. mac电脑如何快速显示桌面及切换应用

    使用mac电脑时,我们习惯打开很多应用,文档等等.如果打开应用非常多,需要操作桌面,却不知如何快速返回桌面和切换应用时,操作就非常不便了,下面简单介绍mac电脑系统如何快速显示桌面及切换应用? 工具/ ...

  10. python脚本实现-excel二级统计

    pandas和SQL数据分析实战视频教程 https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2& ...