如何使用css3制作特效发光字

最新推荐文章于 2024-04-17 01:38:32 发布

weixin_30485799

最新推荐文章于 2024-04-17 01:38:32 发布

阅读量147

点赞数

原文链接：http://www.cnblogs.com/sherrybloghome/p/6550597.html

版权

偶然的一个机会看到一个css3的发光字特效，感觉十分酷炫，借此机会与大家分享一下，好了，直接上代码。

代码很简单，主要用到的css的属性名称有：text-shadow(文本阴影),animation,

<html>
<body>
<head><title></title>
<style type="text/css">
p{
     -webkit-animation: neon1 0.2s ease-in-out infinite alternate;
         -moz-animation: neon1 0.2s ease-in-out infinite alternate;
         animation: neon1 0.2s ease-in-out infinite alternate; 
     color:red;
}
@keyframes neon1 {
        from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px  #fff,
                     0 0 30px  #fff,
                     0 0 40px  #F00,
                     0 0 50px  #F00,     
                     0 0 80px  #F00,
                     0 0 100px #F00, 
                     0 0 150px #F00,
                     0 0 160px #F00,
                     0 0 170px #F00;
            }
        to {
        text-shadow: 0 0 5px  #fff,
                        0 0 10px #fff,
                        0 0 15px #fff,
                        0 0 20px #F00,
                        0 0 25px #F00,
                        0 0 35px #F00,                 
                        0 0 40px #F00,
                        0 0 50px #F00,
                        0 0 75px #F00,
    
        }
     }
@-webkit-keyframes neon1 {
        from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px  #fff,
                     0 0 30px  #fff,
                     0 0 40px  #F00,
                     0 0 50px  #F00,     
                     0 0 80px  #F00,
                     0 0 100px #F00, 
                     0 0 150px #F00,
                     0 0 160px #F00,
                     0 0 170px #F00;
            }
        to {
        text-shadow: 0 0 5px  #fff,
                        0 0 10px #fff,
                        0 0 15px #fff,
                        0 0 20px #F00,
                        0 0 25px #F00,
                        0 0 35px #F00,                 
                        0 0 40px #F00,
                        0 0 50px #F00,
                        0 0 75px #F00,
    
        }
     }
@-moz-keyframes neon1 {
        from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px  #fff,
                     0 0 30px  #fff,
                     0 0 40px  #F00,
                     0 0 50px  #F00,     
                     0 0 80px  #F00,
                     0 0 100px #F00, 
                     0 0 150px #F00,
                     0 0 160px #F00,
                     0 0 170px #F00;
            }
        to {
        text-shadow: 0 0 5px  #fff,
                        0 0 10px #fff,
                        0 0 15px #fff,
                        0 0 20px #F00,
                        0 0 25px #F00,
                        0 0 35px #F00,                 
                        0 0 40px #F00,
                        0 0 50px #F00,
                        0 0 75px #F00,
    
        }
     }
@-o-keyframes neon1 {
        from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px  #fff,
                     0 0 30px  #fff,
                     0 0 40px  #F00,
                     0 0 50px  #F00,     
                     0 0 80px  #F00,
                     0 0 100px #F00, 
                     0 0 150px #F00,
                     0 0 160px #F00,
                     0 0 170px #F00;
            }
        to {
        text-shadow: 0 0 5px  #fff,
                        0 0 10px #fff,
                        0 0 15px #fff,
                        0 0 20px #F00,
                        0 0 25px #F00,
                        0 0 35px #F00,                 
                        0 0 40px #F00,
                        0 0 50px #F00,
                        0 0 75px #F00,
    
        }
     }
</style>
</head>
<p>New</p>
</body>
</html>