css 发光字效果
<!DOCTYPE html>
<html>
<head>
<!-- 超酷炫的CSS3发光字体，可自定义喔！！-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[CSS3] Neon Glow - CodePen</title> <link rel="stylesheet" href="css/style.css" type="text/css" />
<style>
/*setup*/
*{
margin: 0;
padding: 0;
} @font-face {
font-family: 'Monoton';
font-style: normal;
font-weight: 400;
src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff');
} @font-face {
font-family: 'Iceland';
font-style: normal;
font-weight: 400;
src: local('Iceland'), local('Iceland-Regular'), url(http://themes.googleusercontent.com/static/fonts/iceland/v3/F6LYTZLHrG9BNYXRjU7RSw.woff) format('woff');
} @font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(http://themes.googleusercontent.com/static/fonts/pacifico/v5/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff) format('woff');
} @font-face {
font-family: 'PressStart';
font-style: normal;
font-weight: 400;
src: local('Press Start 2P'), local('PressStart2P-Regular'), url(http://themes.googleusercontent.com/static/fonts/pressstart2p/v2/8Lg6LX8-ntOHUQnvQ0E7o3dD2UuwsmbX3BOp4SL_VwM.woff) format('woff');
} @font-face {
font-family: 'Audiowide';
font-style: normal;
font-weight: 400;
src: local('Audiowide'), local('Audiowide-Regular'), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
} @font-face {
font-family: 'Vampiro One';
font-style: normal;
font-weight: 400;
src: local('Vampiro One'), local('VampiroOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
} body{
background-color: #222222;
} #container{
width:500px;
margin:auto;
} /*neeeeoooon*/
p{
text-align:center;
font-size:7em;
margin:20px 0 20px 0;
} a{
text-decoration:none;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
} p:nth-child(1) a{
color:#FF1177;
font-family:Monoton;
}
p:nth-child(1) a:hover{
-webkit-animation: neon1 1.5s ease-in-out infinite alternate;
-moz-animation: neon1 1.5s ease-in-out infinite alternate;
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;
} p:nth-child(4) a{
color:#B6FF00;
font-family:PressStart;
font-size:0.8em;
}
p:nth-child(4) a:hover{
-webkit-animation: neon4 1.5s ease-in-out infinite alternate;
-moz-animation: neon4 1.5s ease-in-out infinite alternate;
animation: neon4 1.5s ease-in-out infinite alternate;
} p:nth-child(5) a{
color:#FF9900;
font-family:Audiowide;
}
p:nth-child(5) a:hover{
-webkit-animation: neon5 1.5s ease-in-out infinite alternate;
-moz-animation: neon5 1.5s ease-in-out infinite alternate;
animation: neon5 1.5s ease-in-out infinite alternate;
} p:nth-child(6) a{
color:#BA01FF;
font-family:Vampiro One;
}
p:nth-child(6) a:hover{
-webkit-animation: neon6 1.5s ease-in-out infinite alternate;
-moz-animation: neon6 1.5s ease-in-out infinite alternate;
animation: neon6 1.5s ease-in-out infinite alternate;
} p a:hover{
color:#ffffff;
} /*glow for webkit*/
@-webkit-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;
}
} @-webkit-keyframes neon4 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #B6FF00,
0 0 70px #B6FF00,
0 0 80px #B6FF00,
0 0 100px #B6FF00,
0 0 150px #B6FF00;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #B6FF00,
0 0 35px #B6FF00,
0 0 40px #B6FF00,
0 0 50px #B6FF00,
0 0 75px #B6FF00;
}
} @-webkit-keyframes neon5 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #FF9900,
0 0 70px #FF9900,
0 0 80px #FF9900,
0 0 100px #FF9900,
0 0 150px #FF9900;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #FF9900,
0 0 35px #FF9900,
0 0 40px #FF9900,
0 0 50px #FF9900,
0 0 75px #FF9900;
}
} @-webkit-keyframes neon6 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #ff00de,
0 0 35px #ff00de,
0 0 40px #ff00de,
0 0 50px #ff00de,
0 0 75px #ff00de;
}
} /*glow for mozilla*/
@-moz-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;
}
} @-moz-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;
}
} @-moz-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;
}
} @-moz-keyframes neon4 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #B6FF00,
0 0 70px #B6FF00,
0 0 80px #B6FF00,
0 0 100px #B6FF00,
0 0 150px #B6FF00;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #B6FF00,
0 0 35px #B6FF00,
0 0 40px #B6FF00,
0 0 50px #B6FF00,
0 0 75px #B6FF00;
}
} @-moz-keyframes neon5 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #FF9900,
0 0 70px #FF9900,
0 0 80px #FF9900,
0 0 100px #FF9900,
0 0 150px #FF9900;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #FF9900,
0 0 35px #FF9900,
0 0 40px #FF9900,
0 0 50px #FF9900,
0 0 75px #FF9900;
}
} @-moz-keyframes neon6 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #ff00de,
0 0 35px #ff00de,
0 0 40px #ff00de,
0 0 50px #ff00de,
0 0 75px #ff00de;
}
} /*glow*/
@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;
}
} @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;
}
} @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;
}
} @keyframes neon4 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #B6FF00,
0 0 70px #B6FF00,
0 0 80px #B6FF00,
0 0 100px #B6FF00,
0 0 150px #B6FF00;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #B6FF00,
0 0 35px #B6FF00,
0 0 40px #B6FF00,
0 0 50px #B6FF00,
0 0 75px #B6FF00;
}
} @keyframes neon5 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #FF9900,
0 0 70px #FF9900,
0 0 80px #FF9900,
0 0 100px #FF9900,
0 0 150px #FF9900;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #FF9900,
0 0 35px #FF9900,
0 0 40px #FF9900,
0 0 50px #FF9900,
0 0 75px #FF9900;
}
} @keyframes neon6 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #ff00de,
0 0 35px #ff00de,
0 0 40px #ff00de,
0 0 50px #ff00de,
0 0 75px #ff00de;
}
} /*REEEEEEEEEEESPONSIVE*/
@media (max-width: 650px) { #container{
width: 100%;
} p{
font-size:3.5em;
} }
</style>
</head>
<body> <div id="container">
<p><a href="http://www.weeiy.com/gank">RED</a></p>
<p><a href="http://www.weeiy.com/gank">BLUE</a></p>
<p><a href="http://www.weeiy.com/gank">Yellow</a></p>
<p><a href="http://www.weeiy.com/gank">GREEN</a></p>
<p><a href="http://www.weeiy.com/gank">ORANGE</a></p>
<p><a href="http://www.weeiy.com/gank">VIOLET</a></p>
</div> </body>
</html>
css 发光字效果的更多相关文章
- ps怎么做发光字体效果 ps中最简单的发光字教程
ps中最简单的发光字教程 我们先用[文字工具]输入文字(比如:发光效果),字体填充为白色,如图所示. 我们选中文字的图层,点击[FX]找到[外发光],如图所示. 接着,我们在外发光里面把颜色设置为紫色 ...
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- 利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- CSS 边框 阴影 效果
CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...
- Css实现透明效果，兼容IE8
Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...
- HTML与CSS简单页面效果实例
本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...
- css 实现评分效果
css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由 background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...
- 纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
随机推荐
- PHP安装laravel(win+linux)
作为一名不优秀的程序猿,忙碌的四月终于结束了,五一大假的最后一天,终于有时间来整理整理这段时间的收获了. 一.laravel介绍 首先看看http://www.sitepoint.com/网站做的一个 ...
- HTML5 之Canvas绘制太阳系
<!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...
- ie下获取上传文件全路径
ie下获取上传文件全路径,3.5之后的火狐是没法获取上传文件全路径的 /*获取上传文件路径*/ function getFilePath(obj) { var form = $(this).paren ...
- 跨域攻击xss
要完全防止跨域攻击是很难的,对于有些站点是直接 拦截跨域的访问,在你从本站点跳转到其他站点时提醒,这算是一种手段吧. 而跨域攻击的发起就是在代码(包括html,css,js或是后台代码,数据库数据)里 ...
- OC第五节 ——点语法和@property
一.setter和getter函数 1.回忆:如何访问对象中的成员变量 2.setter和getter函数的作用 setter 方法: 修改对象的字段/实例变 ...
- 【C语言入门教程】5.6 函数库和文件
函数库是为代码复用建立的,将同一类型,需要在不同的程序里使用的函数放置在一起,就组成了一个函数库.如 C 语言的标准库,它集合了开发者常用的函数.开发者自行编写的函数也可以组成函数库,通常称之为自定义 ...
- 基于SSL协议的双向认证 - SSL协议 [1]
1 概要说明 在互联网通信方式中,目前用的最广泛的是HTTPS配合SSL和数字证书来保证传输和认证安全了. 2 详细介绍 2.1 HTTPS HTTPS全称:Hypertext Transf ...
- iOS开发——UI基础-懒加载，plist文件，字典转模型，自定义view
一.懒加载 只有使用到了商品数组才会创建数组 保证数组只会被创建一次 只要能够保证数组在使用时才创建, 并且只会创建一次, 那么我们就称之为懒加载 lazy - (void)viewDidLoad 控 ...
- awk系列：在awk中如何使用流程控制语句
导读 当你回顾所有到目前为止我们已经覆盖的 awk 实例,从 awk 系列的开始,你会注意到各种实例的所有指令是顺序执行的,即一个接一个地执行.但在某些情况下,我们可能希望基于一些条件进行文本过滤操作 ...
- Unity手游之路<九>自动寻路Navmesh之高级主题
http://blog.csdn.net/janeky/article/details/17492531 之前我们一起学习了如何使用Navmesh组件来实现最基本的角色自动寻路.今天我们再继续深入探索 ...