CSS3炫酷发光文字 ,自定义色彩

广告位

这是一款基于纯CSS3的文字发光特效,当我们将鼠标滑过文字时,文字就会模拟发光动画,展现出非常酷的发光画面。另…

这是一款基于纯CSS3的文字发光特效,当我们将鼠标滑过文字时,文字就会模拟发光动画,展现出非常酷的发光画面。另外,由于引用了特殊字体,所以整个文字效果看起来有着3D立体的特效,如果你的网络无法加载这些字体,可能是由于国外的这个网站被墙的缘故,就像google的字体库网址被屏蔽那样。

CSS3炫酷发光文字 ,自定义色彩

HTML代码

<div id="container">    <p><a href="#">     RED   </a></p>    <p><a href="#">     BLUE   </a></p>    <p><a href="#">     Yellow   </a></p>    <p><a href="#">     GREEN   </a></p>    <p><a href="#">     ORANGE   </a></p>    <p><a href="#">     VIOLET   </a></p>  </div>  

CSS代码

 /*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{    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;   }  }  

自己是从事了五年的前端工程师

这里推荐一下我的前端学习交流群:784783012 ,里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。2019最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

点击:加入

金罗

关于作者: 金罗

为您推荐

广告位

发表评论