猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

css3 怎么实现字体逐个发光

css3 怎么实现字体逐个发光

慕标5832272
浏览 489回答 2
2回答

慕仙森

<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>
0

慕哥9229398

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556<!DOCTYPE&nbsp;html><html><head>&nbsp;<meta&nbsp;charset="utf-8">&nbsp;<title>CSS3发光字</title>&nbsp;<style>*{&nbsp;padding:0;margin:0;font-size:14px;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;body{&nbsp;background:&nbsp;#f3f5f5;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;.d{&nbsp;width:100%;text-align:center;margin:20px&nbsp;auto;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;.a&nbsp;,&nbsp;.n{&nbsp;text-decoration:&nbsp;none;font-size:6em;font-family:"微软雅黑";&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;.a{&nbsp;color:blue;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;.a:link{&nbsp;color:blue;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;.n{&nbsp;color:#FFF;text-shadow:&nbsp;0&nbsp;0&nbsp;10px&nbsp;#000,0&nbsp;0&nbsp;25px&nbsp;#000;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;.def&nbsp;,&nbsp;.h:hover{&nbsp;animation:&nbsp;run&nbsp;2.4s&nbsp;infinite;-webkit-animation:&nbsp;run&nbsp;2.4s&nbsp;infinite;-moz-animation:&nbsp;run&nbsp;2.4s&nbsp;infinite;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-animation:&nbsp;run&nbsp;2.4s&nbsp;infinite;-o-animation:&nbsp;run&nbsp;2.4s&nbsp;infinite;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;@-webkit-keyframes&nbsp;run{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0%,100%{&nbsp;color:#fff;text-shadow:0&nbsp;0&nbsp;10px&nbsp;blue,0&nbsp;0&nbsp;10px&nbsp;blue;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50%{&nbsp;text-shadow:0&nbsp;0&nbsp;10px&nbsp;blue,0&nbsp;0&nbsp;40px&nbsp;blue;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;@-moz-keyframes&nbsp;run{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0%,100%{&nbsp;color:#fff;text-shadow:0&nbsp;0&nbsp;10px&nbsp;blue,0&nbsp;0&nbsp;10px&nbsp;blue;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50%{&nbsp;text-shadow:0&nbsp;0&nbsp;10px&nbsp;blue,0&nbsp;0&nbsp;40px&nbsp;blue;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;@-o-keyframes&nbsp;run{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0%,100%{&nbsp;color:#fff;text-shadow:0&nbsp;0&nbsp;10px&nbsp;blue,0&nbsp;0&nbsp;10px&nbsp;blue;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50%{&nbsp;text-shadow:0&nbsp;0&nbsp;10px&nbsp;blue,0&nbsp;0&nbsp;40px&nbsp;blue;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;@-ms-keyframes&nbsp;run{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0%,100%{&nbsp;color:#fff;text-shadow:0&nbsp;0&nbsp;10px&nbsp;blue,0&nbsp;0&nbsp;10px&nbsp;blue;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50%{&nbsp;text-shadow:0&nbsp;0&nbsp;10px&nbsp;blue,0&nbsp;0&nbsp;40px&nbsp;blue;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;@keyframes&nbsp;run{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0%,100%{&nbsp;color:#fff;text-shadow:0&nbsp;0&nbsp;10px&nbsp;blue,0&nbsp;0&nbsp;10px&nbsp;blue;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50%{&nbsp;text-shadow:0&nbsp;0&nbsp;10px&nbsp;blue,0&nbsp;0&nbsp;40px&nbsp;blue;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;}</style></head><body><hr>字体不带动效：<div&nbsp;class="d">&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href="javascript:void(0);"&nbsp;class="n">如何使用CSS3制作特效发光字</a></div><hr>字体自带动效：<div&nbsp;class="d">&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href="javascript:void(0);"&nbsp;class="a&nbsp;def">不记得你的名字，但记得你的死期。</a></div><hr>字体悬浮动效：<div&nbsp;class="d">&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href="javascript:void(0);"&nbsp;class="a&nbsp;h">剑之所至，心之所往。</a></div><hr></body></html>&nbsp;
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

CSS3