html

  1. <!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>
  2.  
  3. </body>
    </html>
  4.  
  5. CSS
  1. body{
        margin: 0px;
        padding: 0px;
        background-color: #000000;
    }
  2.  
  3. .container{
        width: 500px;
        margin: auto;
    }
    .container p{
        width: 500px;
        height: 21px;
        display: inline-block;
        margin: 20px auto;
        text-align: center;
        line-height: 21px;
    }
  4.  
  5. p:nth-child(1) a{
        color:#FF1177;
        font-family:Monoton;
        font-weight: bold;
    }
  6.  
  7. .container a{
        text-decoration: none;
        transition: all 0.5s;
    }
  8.  
  9. a:hover{
        color: #ffffff;
    }
  10.  
  11. p:nth-child(1) a:hover{
        animation: neon1 1.5s ease-in-out infinite alternate;
    }
  12.  
  13. 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;
    }
  14.  
  15. 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;
    }
  16.  
  17. @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;
        }
    }
  18.  
  19. @-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;
        }
    }
  20.  
  21. @-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. 5.Python3列表和元组

    5.1序列 在python3中序列结构主要有列表.元组.集合.字典和字符串,对于这些序列有以下通用操作. 5.1.1 索引 序列中的每一个元素都有 一个编号,也称为索引.这个索引是从0开始递增的,即下 ...

  2. 如何在一个function里面设置一个全局的变量？

    答:解决方法是在function的开始插入一个global声明: def f() global x

  3. 第五章、web服务器

    一.web服务器 Web服务器就是整个万维网的骨干,广义上来说Web服务器既可以用来表示Web服务器的软件,也可以用来表示提供Web页面的特定设备和计算机.我们在网络上获取的所以资源,都需要有服务器来 ...

  4. Java学习日记基础篇（八) —— 二进制、位运算、位移运算

    二进制 二进制是逢2进位的进位置,0,1是基本算符 原码反码补码 在基本数据类型那里,有详细解释 二进制的最高位数是符号位:0表示整数,1表示负数 正数的原码,反码,补码都一样 负数的反码 = 它的原 ...

  5. Java实体类为什么要实现序列化

    public class User implements Serializable {} 客户端访问了某个能开启会话功能的资源, web服务器就会创建一个与该客户端对应的HttpSession对象,每 ...

  6. maven插件上传本地jar包到maven中央仓库

    settings配置(如果设置后有问题,可以重启idea,保证重新加载settings文件): <!-- 上传jar包到maven中央仓库配置start --> <server> ...

  7. 关于Kernel的思考

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

  8. php手记之01-tp5框架安装

    1.1.介绍 在web领域,PHP是所有编程语言中比较受欢迎的一门语言! PHP已经诞生出几十种编程框架!但国内最热门和使用率最好的框架有Thinkphp和Laravel这两款PHP框架! 1.2.为 ...

  9. python线程池（转）

    ThreadPool: #! /usr/bin/env python # -*- coding: utf-8 -*- import threadpool import time def sayhell ...

  10. Greenwich.SR2版本的Spring Cloud Zuul实例

    网关作为对外服务,在微服务架构中是一个很重要的组件,主要体现在动态路由和接入鉴权这两个功能上.现在我们通过Spring Cloud Zuul来实现对之前a-feign-client(参见Greenwi ...