纯css3特效实现的文字亮光-白红宇

纯css3特效实现的文字亮光

阅读量：5118 次

发布时间：2019-06-13

本文共 1993 字，大约阅读时间需要 6 分钟。

实现的文字亮光

演示地址：http://www.huiyi8.com/css3/

[代码] [CSS]代码

body

{

background: #111;

}

.shiny

{

color: #F5C21B;

background: -webkit-gradient(linear, left top, left bottom, 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;