css3 怎么实现字体逐个发光
2 回答
慕仙森
TA贡献1827条经验 获得超7个赞
<style>
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.masked1{
background-image: -webkit-linear-gradient(left, #0ee5ff, #f4ab20 50%, #0ee5ff 50%, #f4ab20 100%, #0ee5ff);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: masked-animation 5s infinite linear;
}
}
@-webkit-keyframes masked-animation {
0% { background-position: 0 0;}
100% { background-position: -100% 0;}
}
</style>
<div class="masked1" id="sx8">2.684.156</div>
慕哥9229398
TA贡献1877条经验 获得超6个赞
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3发光字</title> <style> *{ padding:0;margin:0;font-size:14px; } body{ background: #f3f5f5; } .d{ width:100%;text-align:center;margin:20px auto; } .a , .n{ text-decoration: none;font-size:6em;font-family:"微软雅黑"; } .a{ color:blue; } .a:link{ color:blue; } .n{ color:#FFF;text-shadow: 0 0 10px #000,0 0 25px #000; } .def , .h:hover{ animation: run 2.4s infinite;-webkit-animation: run 2.4s infinite;-moz-animation: run 2.4s infinite; -ms-animation: run 2.4s infinite;-o-animation: run 2.4s infinite; } @-webkit-keyframes run{ 0%,100%{ color:#fff;text-shadow:0 0 10px blue,0 0 10px blue; } 50%{ text-shadow:0 0 10px blue,0 0 40px blue; } } @-moz-keyframes run{ 0%,100%{ color:#fff;text-shadow:0 0 10px blue,0 0 10px blue; } 50%{ text-shadow:0 0 10px blue,0 0 40px blue; } } @-o-keyframes run{ 0%,100%{ color:#fff;text-shadow:0 0 10px blue,0 0 10px blue; } 50%{ text-shadow:0 0 10px blue,0 0 40px blue; } } @-ms-keyframes run{ 0%,100%{ color:#fff;text-shadow:0 0 10px blue,0 0 10px blue; } 50%{ text-shadow:0 0 10px blue,0 0 40px blue; } } @keyframes run{ 0%,100%{ color:#fff;text-shadow:0 0 10px blue,0 0 10px blue; } 50%{ text-shadow:0 0 10px blue,0 0 40px blue; } } </style> </head> <body> <hr> 字体不带动效： <div class="d"> <a href="javascript:void(0);" class="n">如何使用CSS3制作特效发光字</a> </div> <hr> 字体自带动效： <div class="d"> <a href="javascript:void(0);" class="a def">不记得你的名字，但记得你的死期。</a> </div> <hr> 字体悬浮动效： <div class="d"> <a href="javascript:void(0);" class="a h">剑之所至，心之所往。</a> </div> <hr> </body> </html> |
- 2 回答
- 0 关注
- 486 浏览
添加回答
举报
0/150
提交
取消