利用纯css3实现的文字亮光特效的代码演示

2024-07-11 08:30:20

字体：大中小

来源：转载

供稿：网友

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

　　css3代码：

CSS Code复制内容到剪贴板

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;
}