这篇文章主要讲解了“如何利用纯css3实现文字亮光特效”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习”如何利用纯css3实现文字亮光特效”吧!
今天给大家分享一款纯css3实现的文字亮光特效。这款特效文字上一道亮光逐渐扫过文字。效果非常漂亮。一起看下效果:
实现的代码。
<强> html代码:
,=,=Shiny ,,
<强> css3代码:
身体,,
<李>{,,
<李>,,:,;,,
<李>},,
<李>,,
<李>。闪亮的,,
<李>{,,
<李>,,:,;,,
<李>,,:, -webkit-gradient(线性的,,,,,,,,从(),());,,
<李>,, webkit,:,文本;,,
<李>,, -webkit-text-fill -:,;,,
<李>,,:;,,
<李>,,:;,,
<李>,,:;,,
<李>,,,,,,,,,
<李>,,:, 13个新兴市场;,,
<李>,,:, 900;,,
<李>,,:,;,,
<李>,,:,;,,
<李>},,
<李>,,
<李>。闪亮的:之前,,
<李>{,,
<李>,,,,,,,,,,
<李>,,,, -webkit-animation:, flare 5 s 无限;,,
<李>,, -webkit-animation-timing-function:,线性;,,
<李>,,:,线性渐变(65度,,,20%,rgba (255,, 255,, 255,, 0.2), 20%, rgba (255,, 255,, 255,, 0.3), 27%,,, 27%,,, 100%);,,
<李>,, webkit,:,文本;,,
<李>,, -webkit-text-fill -:,;,,
<李>,,:,;,,
<李>,,:,;,,
<李>,,:,;,,
<李>,,:,;,,
<李>,,:,;,,
<李>},,
<李>,,
<李>。闪亮的::后,,
<李>{,,
<李>,,:,;,,
<李>,,:,;,,
<李>,,:,;,,
<李>,,:,;,,
<李>,,,,,, 0, 0,,,,,, 0, 0,,,,,, 0, 0,,,,,, 0, 0,,,,,, 0, 0,,;,,
<李>,,:, 0;,,
<李>,,:, 1;,,
<李>},,
<李>,,
<李>.inner-shiny::,,。inner-shiny:之前,,
<李>{,,
<李>,,,,,,,, -webkit-animation:, sparkle 5 s 无限;,,
<李>,, -webkit-animation-timing-function:,线性;,,
<李>,,,,,,,,,
<李>,,半径:,100%;,,
<李>,,不必:,0,0,,,,0,0,,,,0,0,,,,0,0,,,,0,0,,,,0,0,,,,0,0,,;,,
<李>,,:,;,,
<李>,,:,;,,
<李>,,:,;,,
<李>,,不透明度:,0.7;,,
<李>,,:,;,,
<李>,,:,;,,
<李>},,
<李>,,
<李>。inner-shiny:之前,,
<李>{,,
<李>,,,, -webkit-animation-delay:, 0.2年代;,,
<李>,,:,;,,
<李>,,:, 0.12 em;,,
<李>,,:, 0.8 em;,,
<李>,,:,;,,
<李>},,
<李>,,
<李>。后inner-shiny::,,
<李>{,,
<李>,,:, 0.32 em;,,
<李>,,,,,,null
