css3 卡片亮光_利用css3实现文字亮光特效的代码

这篇文章主要介绍了关于利用css3实现文字亮光特效的代码，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

以前分享过很多css3实现的字体特效，今天给大家分享一款纯css3实现的文字亮光特效。这款特效文字上一道亮光逐渐扫过文字。效果非常漂亮。感兴趣的朋友可以进来学习一下

今天给大家分享一款纯css3实现的文字亮光特效。这款特效文字上一道亮光逐渐扫过文字。效果非常漂亮。一起看下效果：

实现的代码。

html代码：Shiny

css3代码：body

{

background: #111;

}

.shiny

{

color: #F5C21B;

background: -webkit-gradient(linear, left top, left bottombottom, from(#F5C21B), to(#D17000));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

display:block;

width:610px;

margin:auto;

font-family: "Source Sans Pro", sans-serif;

font-size: 13em;

font-weight: 900;

position: relative;

text-transform: uppercase;

}

.shiny::before

{

background-position: -180px;

-webkit-animation: flare 5s infinite;

-webkit-animation-timing-function: linear;

background-image: linear-gradient(65deg, transparent 20%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.3) 27%, transparent 27%, transparent 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

content: "Shiny";

color: #FFF;

display: block;

padding-right: 140px;

position: absolute;

}

.shiny::after

{

content: "Shiny";

color: #FFF;

display: block;

position: absolute;

text-shadow: 0 1px #6E4414, 0 2px #6E4414, 0 3px #6E4414, 0 4px #6E4414, 0 5px #6E4414, 0 6px #6E4414, 0 7px #6E4414, 0 8px #6E4414, 0 9px #6E4414, 0 10px #6E4414;

top: 0;

z-index: -1;

}

.inner-shiny::after, .inner-shiny::before

{

-webkit-animation: sparkle 5s infinite;

-webkit-animation-timing-function: linear;

background: #FFF;

border-radius: 100%;

box-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #FFF, 0 0 25px #FFF, 0 0 30px #FFF, 0 0 35px #FFF;

content: "";

display: block;

height: 10px;

opacity: 0.7;

position: absolute;

width: 10px;

}

.inner-shiny::before

{

-webkit-animation-delay: 0.2s;

height: 7px;

left: 0.12em;

top: 0.8em;

width: 7px;

}

.inner-shiny::after

{

top: 0.32em;

rightright: -5px;

}

@-webkit-keyframes flare

{

0% { background-position: -180px; }

30% { background-position: 500px; }

100% { background-position: 500px; }

}

@-webkit-keyframes sparkle

{

0% { opacity: 0; }

30% { opacity: 0; }

40% { opacity: 0.8; }

60% { opacity: 0; }

100% { opacity: 0; }

}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

CSS3实现的图片放大镜特效

利用CSS3实现了八组超炫酷鼠标滑过图片动画

CSS3中使用RGBa来调节透明度的方法