点亮文字(CSS)
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)的更多相关文章
- 文档流&文字&CSS常用命令
文档流 文档流就是文档内元素流动方向 流动方向 内联元素从左往右流,宽度不够,之字形,且元素会被截断 块元素从上往下流动,一排一排 注意事项 内联元素中有英文单词,流动时宽度不够,英文单词会整体迁移, ...
- 图片文字css小知识点
行内元素,图片和文字中间有缝隙,需要给父元素设置font-size:0: 图片和文字不对齐,给图片设置vertical-align:top 文字行高有缝隙 设置vertical-align:top
- 经典的横线中间文字css布局---flex布局
html: <div class="title"> <div class="line"></div> <div cla ...
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
- CSS样式之语法
选择符 选择符 {属性1:属性值1;属性2:属性值2} 选择符(selector):指定样式适用的标签,除指定标签外,样式不起作用 属性:样式的关键字 属性值:描述样式的值: 格式:属性与属性之间使用 ...
- jQuery操作DOM和CSS函数
function des html jquery result html() 获取元素中HTML内容 <div id="box" style="color:red& ...
- CSS一级导航-天蓝色(带阴影)
一款亮丽的导航,能给网站一个画龙点睛的作用.导航在指引用户搜寻内容时,还能改变用户浏览网站的心情,浏览网站也像一场旅行,有创意的导航栏让用户欣赏起来也会更加愉悦,增加对网站的兴趣. 本人不擅长美工制作 ...
- 怎么修改placeholder字体的css样式
修改palceholder内文字的css样式 ::-webkit-input-placeholder{ color: red; font-size: 20px; line-height: 50px; ...
随机推荐
- 【概率论】4-7:条件期望(Conditional Expectation)
title: [概率论]4-7:条件期望(Conditional Expectation) categories: - Mathematic - Probability keywords: - Exp ...
- CF891C Envy【最小生成树】
题目链接 我们知道,根据Kruskal的贪心,对于最小生成树,每一种权值的边数是一样的,而且如果将\(\leq x\)的边做最小生成树,合法方案的联通性是一样的.所以我们可以对于所有边分开考虑. 对于 ...
- mac 启动mysql
sudo /usr/local/mysql/support-files/mysql.server stop sudo /usr/local/mysql/support-files/mysql.serv ...
- ftp连接
package enterprise.celerity.ac.util; import java.io.IOException;import java.io.InputStream;import ja ...
- Hadoop 安装(本地、伪分布、分布式模式)
本地模式 环境介绍 一共三台测试机 master 192.168.4.91 slave1 192.168.4.45 slave2 192.168.4.96 操作系统配置 1.Centos7 ...
- Tkinter 之MessageBox弹出框
一.参数说明 语法 作用 截图 tk.messagebox.showwarning(title='提示', message='你确定要删除吗?') 警告信息弹窗 tk.messagebox.sho ...
- 通过pro文件使Qt的build目录更清爽
1.指定moc存放的路径,Qt moc编译器生成的moc文件 unix:MOC_DIR = ../tmp win32:MOC_DIR = ../tmp 2.指定目标文件存放的路径,生成的dll或者ex ...
- 5分钟学会如何创建spring boot项目
上一篇博客说了如何创建spring boot项目,但是有些同学会觉得有点麻烦,有没有什么快速学会能快速创建spring boot项目的方法,答案是肯定的.接下来我们就一起来快速创建一个spring b ...
- php手记(替代语法、COOKIE及时生效)
为方便区分流程语句的开始和结束位置,可以使用PHP提供的替代语法进行编码. 左花括号({) - 替换成 → 冒号(:) 右花括号(}) - 替换成 → "endif;" " ...
- js修改Switchery复选框的状态
声明一个switchery插件,绑定到一个input上 js代码 var mySwitch = new Switchery($('#blacklist')[0], { size:"small ...