Maison >interface Web >tutoriel CSS >Comment utiliser CSS3+html5 pour créer un effet néon de texte (payer le code complet)
Comment utiliser CSS3+html5 pour créer un effet néon de texte (payer le code complet)
- 坏嘻嘻original
- 2018-09-30 10:12:584721parcourir
Aujourd'hui, avec le développement croissant de la technologie, les gens deviennent de plus en plus exigeants en matière d'esthétique, ce qui nous oblige à être plus rigoureux dans le développement front-end et en même temps, nous devons ajouter de nouveaux éléments pour attirer l'attention. Aujourd'hui, cet article va vous montrer comment utiliser CSS3+html5 pour créer des effets de texte néon. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Fonctionnalités d'utilisation de CSS3+html5 pour créer des effets de néon de texte
Le texte a une animation néon clignotante, et là sont également des effets spéciaux animés sympas lorsque le texte est sélectionné ;
Le texte peut être saisi dynamiquement et le texte saisi est rendu avec des effets de lumière néon en temps réel.
Étapes pour utiliser css3+html5 pour créer un effet néon de texte
Entrez le texte qui doit être ajouté avec des effets spéciaux.
Utilisez les propriétés d'ombre multicouche de box-shadow pour dessiner l'effet tridimensionnel des tubes au néon.
Utilisez text-shadow pour dessiner plusieurs couches d'ombres, dessiner des tubes de texte, émettre de la lumière et projeter pour obtenir l'effet de définition d'un texte en trois dimensions.
-
Ici, nous nous concentrons sur le principe d'obtention de l'effet clignotant au néon
Nous devons définir deux étiquettes sur le texte et les faire se chevaucher complètement , la couche supérieure implémente l'effet de lampe, la couche inférieure implémente l'effet de halo, puis utilise le sélecteur pour le faire clignoter en continu. En même temps, nous devons définir la valeur de l'attribut text-shadow des deux états off et. allumés, de sorte qu'ils commutent à des vitesses différentes, formant un effet clignotant au néon.
Remarque : si vous ne comprenez pas le contenu ci-dessus, vous pouvez consulter d'autres articles sur ce site
Comment utiliser css3 pour obtenir un effet d'ombre simple pour les images (avec code complet)
Comment utiliser CSS3 pour obtenir l'effet de lueur dans les polices (explication détaillée)
Utilisez le code css3 + html5 pour créer un effet de lumière néon de texte
<!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: '';
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: 'Wire One', 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('resize', "*");
}
</script>
</body>
</html>L'effet de lumière néon de texte est comme indiqué sur l'image
Résumé
Au début, je pensais que le texte L'effet de lumière néon était une animation gif ou quelque chose comme ça, mais après avoir examiné les éléments, je l'ai trouvé. Il a été implémenté à l'aide d'une animation html5 + CSS3, ce qui a immédiatement éveillé mon (hao) désir (qi) désir (xin) et j'ai décidé de le découvrir. Après avoir vérifié le code, j'ai trouvé que le principe est si simple. J'espère que le contenu de cet article pourra aider tout le monde.
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!