Effet néon SVG

Le rendu est le suivant :

C'est comme un cercle de fourmis qui rampent dessus. . . . . emmmmm métaphore étrange

fill:none; peut empêcher le remplissage des graphiques. Si cet attribut n'est pas ajouté, la couleur de remplissage par défaut est le noir. Cet effet

a constaté que les attributs de trait sont tous. C'est très intéressant, il y a le remplissage, la transparence et le trait-linecap, mais les effets les plus couramment utilisés sont le trait-dasharray et le trait-dashoffset.

• stroke-miterlimit représente l'expression de l'intersection des traits (angle aigu). La taille par défaut est 4. Que signifie la perte d'angle entre biseau et biseau ? Plus la valeur est grande, plus la perte est faible. Ce qu'il fait spécifiquement, je ne suis pas sûr. Vous pouvez vérifier d'autres informations.

• stroke-dasharray représente un trait pointillé. Les valeurs facultatives sont : none, <dasharray>, inherit. Parmi elles, none ne signifie pas une ligne pointillée ; <dasharray> est une liste de valeurs séparées par des virgules ou des espaces. Indique la longueur de chaque extrémité de la ligne pointillée. Il peut s'agir d'une valeur de longueur fixe ou d'une valeur en pourcentage inherit héritage de table.

• stroke-dashoffset représente le décalage de départ de la ligne pointillée. Les valeurs facultatives sont : <percentage>, <length>, inherit Valeur en pourcentage, valeur de longueur, héritage.

• stroke-opacity représente la transparence des traits. La valeur par défaut est 1.

J'admire particulièrement l'exemple frappant cité par l'auteur :

Une saucisse de jambon mesure 12 cm de long. Une ligne pointillée doit être tracée dessus. il, et les lignes pointillées doivent être espacées de 15 cm. S'il n'y a pas de dashoffset, les 15 cm avant de la saucisse de jambon seront recouverts de sauce chili ! Il ne fait en réalité que 12 centimètres, donc ce que nous voyons, c'est toute la saucisse avec une sauce chili. Maintenant, dashoffset fait également 15 centimètres, c'est-à-dire que la ligne pointillée doit être décalée de 15 centimètres. Par conséquent, la sauce chili doit être appliquée à l'extérieur de la saucisse au jambon, ce qui signifie qu'il n'y a pas de sauce chili sur le jambon. saucisse. Si vous le remplacez par la ligne droite SVG ci-dessus, la ligne droite ne sera plus visible. Au fur et à mesure que nous réduisons la valeur dashoffset, nous constaterons que la sauce chili sur la saucisse au jambon apparaît petit à petit, comme si la sauce chili était enduite de la racine de la saucisse au jambon.

<style type="text/css">    
    body{background-color:#00688B;    
    }   
    .text{font-size: 64px;    
     font-weight: normal;    
     text-transform: uppercase;    
     fill:none;   
    stroke: #B0E0E6;    
    stroke-width: 2px;
    stroke-dasharray: 90 310;
    animation: stroke 6s infinite linear;
    }
    .text-1{stroke: #FFEC8B;
        animation-delay:-1.5s;    
    text-shadow:5px 5px 5px #FFEC8B;
        }
    .text-2{stroke:#AEEEEE;    
        animation-delay:-3s;     
        text-shadow:5px 5px 5px #7FFFD4;
        }
    .text-3{stroke:#EEE0E5;animation-delay:-4.5s;text-shadow:5px 5px 5px #7FFFD4;
        }
    .text-4{stroke:#FFC1C1;animation-delay:-6s;text-shadow:5px 5px 5px #7FFFD4;
        } 
    @keyframes stroke { to { stroke-dashoffset: -400;}}
</style>
<svg width="100%" height="100">   
 <text text-anchor="middle" x="50%" y="50%" class="text text-1" > Happy birthday to you❤ </text>
 <text text-anchor="middle" x="50%" y="50%" class="text text-2" > Happy birthday to you❤</text>    
 <text text-anchor="middle" x="50%" y="50%" class="text text-3" > Happy birthday to you❤ </text>
 <text text-anchor="middle" x="50%" y="50%" class="text text-4" > Happy birthday to you❤ </text>
</svg>

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!