^{<noscript id="bokgt"></noscript>}

利用純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;
}