Code zur Verwendung von CSS3 zum Erzielen von Textbeleuchtungseffekten

In diesem Artikel wird hauptsächlich der Code zur Verwendung von CSS3 zum Erzielen von Textbeleuchtungseffekten vorgestellt. Jetzt kann ich ihn mit Ihnen teilen.

Ich habe viele CSS3-Implementierungen geteilt Vorherige Schrifteffekte, heute werde ich mit Ihnen einen rein in CSS3 implementierten Textbeleuchtungseffekt teilen. Mit diesem besonderen Effekt streicht nach und nach ein helles Licht über den Text. Der Effekt ist sehr schön. Freunde, die Interesse haben, können vorbeikommen und lernen

Heute werde ich einen rein in CSS3 implementierten Textbeleuchtungseffekt mit Ihnen teilen. Mit diesem besonderen Effekt streicht nach und nach ein helles Licht über den Text. Der Effekt ist sehr schön. Schauen wir uns den Effekt an:

Implementierter Code.

　HTML-Code:

<span class="shiny"><span class="inner-shiny">Shiny</span> </span>

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

Das Obige ist hoffentlich der gesamte Inhalt dieses Artikels Es wird für das Lernen aller hilfreich sein. Bitte beachten Sie die chinesische PHP-Website für weitere verwandte Inhalte!

Verwandte Empfehlungen:

Bildlupeneffekt realisiert durch CSS3

Verwenden Sie CSS3, um acht Gruppen supercooler Mäuse zu realisieren Schieberegler Durch Bildanimation

So verwenden Sie RGBa, um die Transparenz in CSS3 anzupassen

Das obige ist der detaillierte Inhalt vonCode zur Verwendung von CSS3 zum Erzielen von Textbeleuchtungseffekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!