请选择 进入手机版 | 继续访问电脑版

文字闪烁特效 html+css

[复制链接]
大胆 发表于 2021-1-2 12:03:22 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
上效果先:


先言:

看过我文章可以知道,这东西似曾相识~ ╭(●`∀´●)╯确实,这个和我另一篇文章“文字点闪特效”原理是差不多的
实现:

1.界说html标签:
  1. [size=6]        佛        主        保        佑        ,        考        试        全        过        !            [/size]
复制代码
2.文字的根本样式,巨细颜色等:
  1. h1{            font-family: 'fangsong';            font-size: 6em;            color: transparent;        }        span{           display: table-cell;           animation: san 3s linear infinite;        }
复制代码
display: table-cell;此元素会作为一个表格单元格显示(雷同 和 )
color: transparent;文字颜色透明
3.文字发亮的效果,就闪一下然后就又会(20%-80%的时候)变透明:
  1. @keyframes san{            0%,100%{                color: rgb(255, 255, 255);                         text-shadow: 0 0 5px rgb(1, 231, 247),                            0 0 15px rgb(1, 231, 247),                            0 0 25px rgb(1, 231, 247),                            0 0 50px rgb(1, 231, 247),                            0 0 80px rgb(1, 231, 247),                            0 0 120px rgb(1, 231, 247),                            0 0 160px rgb(1, 231, 247),                            0 0 200px rgb(1, 231, 247),                            0 0 300px rgb(1, 231, 247),                            0 0 400px rgb(1, 231, 247),                            0 0 500px rgb(1, 231, 247);            }            20%,80%{               color: transparent;               text-shadow: none;            }                   }
复制代码
text-shadow:是给它加阴影,写了许多行是为了阴影更亮;
4.制造时间差,让差别的时间差别的文字亮;
  1. h1 span:nth-child(1){            animation-delay:0s;        }        h1 span:nth-child(2){            animation-delay:0.1s;        }         h1 span:nth-child(3){            animation-delay:0.2s;        }        h1 span:nth-child(4){            animation-delay:0.3s;        }        h1 span:nth-child(5){            animation-delay:0.4s;        }        h1 span:nth-child(6){            animation-delay:0.5s;        }        h1 span:nth-child(7){            animation-delay:0.6s;        }        h1 span:nth-child(8){            animation-delay:0.7s;        }        h1 span:nth-child(9){            animation-delay:0.8s;        }        h1 span:nth-child(10){            animation-delay:0.9s;        }
复制代码
animation-delay 期待多少秒,然后才开始动画;
完整代码:

  1.             北极光之夜。            *{            padding: 0;            margin: 0;            box-sizing: border-box;        }        body{            height: 100vh;            display: flex;            align-items: center;            justify-content: center;            background-color: rgb(0, 0, 0);        }        h1{            font-family: 'fangsong';            font-size: 6em;            color: transparent;        }        span{           display: table-cell;           animation: san 3s linear infinite;        }        h1 span:nth-child(1){            animation-delay:0s;        }        h1 span:nth-child(2){            animation-delay:0.1s;        }         h1 span:nth-child(3){            animation-delay:0.2s;        }        h1 span:nth-child(4){            animation-delay:0.3s;        }        h1 span:nth-child(5){            animation-delay:0.4s;        }        h1 span:nth-child(6){            animation-delay:0.5s;        }        h1 span:nth-child(7){            animation-delay:0.6s;        }        h1 span:nth-child(8){            animation-delay:0.7s;        }        h1 span:nth-child(9){            animation-delay:0.8s;        }        h1 span:nth-child(10){            animation-delay:0.9s;        }        @keyframes san{            0%,100%{                color: rgb(255, 255, 255);                         text-shadow: 0 0 5px rgb(1, 231, 247),                            0 0 15px rgb(1, 231, 247),                            0 0 25px rgb(1, 231, 247),                            0 0 50px rgb(1, 231, 247),                            0 0 80px rgb(1, 231, 247),                            0 0 120px rgb(1, 231, 247),                            0 0 160px rgb(1, 231, 247),                            0 0 200px rgb(1, 231, 247),                            0 0 300px rgb(1, 231, 247),                            0 0 400px rgb(1, 231, 247),                            0 0 500px rgb(1, 231, 247);            }            20%,80%{               color: transparent;               text-shadow: none;            }                   }        [size=6]        佛        主        保        佑        ,        考        试        全        过        !            [/size]
复制代码
总结:

新的一年,新的希望!

来源:https://blog.csdn.net/luo1831251387/article/details/112076419
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )