Heim > Artikel > Web-Frontend > So verwenden Sie CSS3 + HTML5, um Text-Neon-Effekte zu erstellen (vollständigen Code bezahlen)

So verwenden Sie CSS3 + HTML5, um Text-Neon-Effekte zu erstellen (vollständigen Code bezahlen)

坏嘻嘻Original: 2018-09-30 10:12:584633Durchsuche

Heute, mit der zunehmenden Entwicklung der Technologie, werden die Menschen immer wählerischer in Bezug auf die Ästhetik, was von uns verlangt, bei der Front-End-Entwicklung strenger vorzugehen und gleichzeitig neue Elemente hinzuzufügen, um Aufmerksamkeit zu erregen. Heute zeigt Ihnen dieser Artikel, wie Sie CSS3 + HTML5 verwenden, um Text-Neon-Effekte zu erstellen. Ich hoffe, dass er für Freunde hilfreich ist.

Funktionen der Verwendung von CSS3+HTML5 zum Erstellen von Text-Neoneffekten

Der Text hat eine blinkende Neonanimation und dort sind auch coole animierte Spezialeffekte, wenn Text ausgewählt ist;
Text kann dynamisch eingegeben werden, und der eingegebene Text wird in Echtzeit mit Neonlichteffekten gerendert.

Schritte zur Verwendung von CSS3+HTML5 zum Erstellen von Text-Neoneffekten

Geben Sie den Text ein, der mit Spezialeffekten hinzugefügt werden soll.
Verwenden Sie die mehrschichtigen Schatteneigenschaften von Box-Shadow, um den dreidimensionalen Effekt von Neonröhren zu zeichnen.
Verwenden Sie Textschatten, um mehrere Schattenebenen zu zeichnen, Textröhren zu zeichnen, Licht auszusenden und zu projizieren, um den Effekt des Festlegens von dreidimensionalem Text zu erzielen.
Hier konzentrieren wir uns auf das Prinzip, den Neon-Blinkeffekt zu erzielen

Wir müssen zwei Beschriftungen auf den Text setzen und sie vollständig überlappen lassen Die obere Ebene implementiert den Lampeneffekt, die untere Ebene implementiert den Halo-Effekt und verwendet dann den Selektor, um ihn kontinuierlich blinken zu lassen. Gleichzeitig müssen wir die Textschattenattributwerte der beiden festlegen Aus- und Ein-Zustände, so dass sie mit unterschiedlicher Geschwindigkeit wechseln und einen Neon-Blinkeffekt erzeugen.

Hinweis: Wenn Sie den oben genannten Inhalt nicht verstehen, können Sie andere Artikel auf dieser Website lesen

Verwendung CSS3 zum Erzielen eines einfachen Schatteneffekts für Bilder (mit vollständigem Code)

So verwenden Sie CSS3, um den Leuchteffekt in Schriftarten zu erzielen (ausführliche Erklärung)

Verwenden Sie CSS3 + HTML5-Code, um Text-Neonlichteffekt zu erstellen

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 html5文字霓虹灯交替闪烁效果</title>
<style>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: &#39;&#39;;
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
  body {
  background-color: #222;
  background-image: -webkit-radial-gradient(circle, #333, #222, #111);
  background-attachment: fixed;
  overflow: hidden;
  font-family: &#39;Wire One&#39;, sans-serif;
  font-size: 6em;
  color: #FFF;
  line-height: normal;
  text-align: center;
}
#glow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 1em;
  margin: auto;
  display: block;
}
#glow p,
#glow span{
  display: inline-block;
  color: #FFF;
  text-shadow: 0 0 15px;
}
#glow p:nth-child(odd) {
  -webkit-animation: bglow .3s ease infinite;
}
#glow p:nth-child(even) {
  -webkit-animation: rglow .3s ease infinite;
}
@-webkit-keyframes bglow {
  0% {
    color: rgb(0, 135, 211);
    text-shadow: 0 0 15px;
  }
}
@-webkit-keyframes rglow {
  100% {
    color: rgb(233, 54, 40);
    text-shadow: 0 0 15px;
  }
}
  </style>
  <script>
    window.confirm = function(){};
    window.prompt  = function(){};
    window.open    = function(){};
    window.print   = function(){};
    // Support hover state for mobile.
    if (false) {
      window.ontouchstart = function(){};
    }
  </script>
</head>
<body>
  <section id="glow">
  <p>P</p>
  <p>H</p>
  <p>P</p>
  <p>中</p>
  <p>文</p>
  <p>网</p>
</section>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script>
    if (document.location.search.match(/type=embed/gi)) {
      window.parent.postMessage(&#39;resize&#39;, "*");
    }
  </script>
</body>
</html>

Der Text-Neonlichteffekt ist wie im Bild gezeigt

So verwenden Sie CSS3 + HTML5, um Text-Neon-Effekte zu erstellen (vollständigen Code bezahlen)

Zusammenfassung

Zuerst dachte ich an den Text-Neon-Effekt war eine GIF-Animation oder so etwas, aber nachdem ich die Elemente überprüft hatte, stellte ich fest, dass es sich tatsächlich um eine HTML5 + CSS3-Animation handelte, die sofort mein (hao) Verlangen (qi) Verlangen (xin) weckte, und ich beschloss, es danach herauszufinden Als ich den Code überprüfte, stellte ich fest, dass das Prinzip so einfach ist. Ich hoffe, dass der Inhalt dieses Artikels für jeden etwas bringen kann.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3 + HTML5, um Text-Neon-Effekte zu erstellen (vollständigen Code bezahlen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css3 选择器

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie reines CSS, um den Hover-Effekt des Verschiebens dekorativer Elemente von beiden Seiten der Schaltfläche zu erzielen (Quellcode im Anhang)Nächster Artikel：So verwenden Sie reines CSS, um den Hover-Effekt des Verschiebens dekorativer Elemente von beiden Seiten der Schaltfläche zu erzielen (Quellcode im Anhang)

In Verbindung stehende Artikel

Mehr sehen