上效果先:
先言:
看过我文章可以知道,这东西似曾相识~ ╭(●`∀´●)╯确实,这个和我另一篇文章“文字点闪特效”原理是差不多的
实现:
1.定义html标签:
<h1>
<span>佛</span>
<span>主</span>
<span>保</span>
<span>佑</span>
<span>,</span>
<span>考</span>
<span>试</span>
<span>全</span>
<span>过</span>
<span>!</span>
</h1>
2.文字的基本样式,大小颜色等:
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%的时候)变透明:
@keyframes san{