Code pour utiliser CSS3 pour obtenir des effets d'éclairage de texte-tutoriel CSS-php.cn

Code pour utiliser CSS3 pour obtenir des effets d'éclairage de texte

不言

Libérer： 2018-06-26 13:48:14

original

1562 Les gens l'ont consulté

Cet article présente principalement le code sur l'utilisation de CSS3 pour obtenir des effets d'éclairage de texte. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

J'ai partagé de nombreuses implémentations CSS3. avant. Effets de police, je vais aujourd'hui partager avec vous un effet d'éclairage de texte implémenté uniquement en CSS3. Une lumière vive balaie progressivement le texte avec cet effet spécial. L'effet est très beau. Les amis intéressés peuvent venir apprendre

Aujourd'hui, je vais partager avec vous un effet d'éclairage de texte implémenté uniquement en CSS3. Une lumière vive balaie progressivement le texte avec cet effet spécial. L'effet est très beau. Jetons un coup d'œil à l'effet :

Code implémenté.

　code html :

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

Copier après la connexion

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

Copier après la connexion

Ce qui précède est l'intégralité du contenu de ce article, j'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Effet de loupe d'image réalisé par CSS3

Utilisation de CSS3 pour réaliser huit groupes de souris super cool sliders Animation d'image

Comment utiliser RGBa pour ajuster la transparence en CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!