CSS3制作炫酷的自定义发光文字
程序员文章站
2023-12-11 19:55:10
这篇文章主要为大家详细介绍了CSS3制作炫酷的自定义发光文字,这是一款基于纯CSS3的文字发光特效,当我们将鼠标滑过文字时,文字就会模拟发光动画,展现出非常酷的发光画面,感兴趣的... 16-03-28...
本文为大家分享一款基于纯css3的文字发光特效,当我们将鼠标滑过文字时,文字就会模拟发光动画,展现出非常酷的发光画面。另外,由于引用了特殊字体,所以整个文字效果看起来有着3d立体的特效,如果你的网络无法加载这些字体,可能是由于国外的这个网站被墙的缘故,就像google的字体库网址被屏蔽那样。
html代码
xml/html code复制内容到剪贴板
- <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代码
css code复制内容到剪贴板
- /*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;
- }
- }
以上就是本文的全部内容,希望对大家的学习有所帮助。