SVG-Neoneffekt

Die Darstellung ist wie folgt:

Es ist wie ein Kreis von Ameisen, die darauf krabbeln. . . . . emmmmm seltsame Metapher

fill:none; Wenn dieses Attribut nicht hinzugefügt wird, ist die Standardfüllfarbe schwarz.

hat festgestellt, dass die Strichattribute alle sind Es ist sehr interessant, es gibt Füllung, Transparenz und Strich-Linecap, aber die am häufigsten verwendeten Effekte sind Strich-Dasharray und Strich-Dashoffset.

• stroke-miterlimit stellt den Ausdruck des Strichschnittpunkts (spitzer Winkel) dar. Die Standardgröße ist 4. Was bedeutet der Winkelverlust von Abschrägung zu Abschrägung? Je größer der Wert, desto kleiner der Verlust. Was es konkret macht, weiß ich nicht genau. Sie können andere Informationen überprüfen.

• stroke-dasharray steht für einen gestrichelten Strich. Optionale Werte sind: none, <dasharray>, inherit. Dabei bedeutet none keine durch Kommas oder Leerzeichen getrennte Liste von Werten. Gibt die Länge jedes gepunkteten Linienendes an. Es kann sich um einen Wert mit fester Länge oder um einen Prozentwert handeln. <dasharray>inherit

• stellt den Startversatz der gepunkteten Linie dar. Optionale Werte sind:

  , stroke-dashoffset, <percentage> Prozentwert, Längenwert, Vererbung. <length>inherit

• steht für Strichtransparenz. Der Standardwert ist

  .stroke-opacity1

Ich bewundere besonders das anschauliche Beispiel, das der Autor aufgeführt hat:

Eine Schinkenwurst ist 12 cm lang. Es sollte eine gepunktete Linie gezeichnet werden Die gestrichelten Linien sollten einen Abstand von 15 cm haben. Wenn kein

vorhanden ist, werden die vorderen 15 cm der Schinkenwurst mit Chilisauce bedeckt. Eigentlich sind es nur 12 Zentimeter, wir sehen also die ganze Wurst mit Chilisauce. Nun beträgt

ebenfalls 15 Zentimeter, das heißt, die gestrichelte Linie muss um 15 Zentimeter nach hinten verschoben werden. Dadurch muss die Chilisauce außerhalb der Schinkenwurst aufgetragen werden, was bedeutet, dass sich keine Chilisauce auf dem Schinken befindet Wurst. Wenn Sie es oben in die gerade SVG-Linie ändern, ist die gerade Linie nicht mehr sichtbar. Wenn wir den dashoffset-Wert nach und nach verringern, werden wir feststellen, dass die Chilisauce auf der Schinkenwurst nach und nach erscheint, als ob die Chilisauce von der Wurzel der Schinkenwurst verschmiert wäre. dashoffsetdashoffset

<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>

Das obige ist der detaillierte Inhalt vonSVG-Neoneffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!