The prequel to the past is here
The past 3
My unconventional operation to be pulled in the girl a little flustered, she cleared her throat, with a gentle but slightly flustered voice said: “Pretty boy, this is your call service, a total of 24 yuan.” I listened to a leng, soon reaction, with my programmer logic thinking found two flaws in this sentence: 1, haven’t provided services, how to collect money; This service is also too cheap, can dongguan win by cheap and good quality? I calmly said, “I haven’t felt served yet. Is looking at my neon sign a service? Is my neon light so hot?” “Isn’t that the boat boy porridge and cold coke you ordered?” “No ah” “is this room 404” “No oh, no wonder will go wrong, I don’t blame you, girl, 404 is very difficult to find the correct address… We programmers know that.”
— — — — — — — — — — — — — — — — — — — — — — — — — to force the line again — — — — — — — — — — — — — — — — — — — — — — — — — — —
Two, get a “rose”
Let’s start with a simple SVG animation, since this animation was used in the cloud animation, I won’t go into details and go straight to the code:
<text id="textbid" text-anchor="middle" x="62%" y="60%" fill-opacity="1" rotate="40" class="textb-front"> rose < the animate attributeName ="rotate" id="first" begin="0s; second.end" from="130" to="150" dur="1s"></animate>
<animate attributeName="rotate" id="second" begin="first.end" from="150" to="130" dur="1s"></animate>
</text>Copy the codeI’m just going to rotate the rose and I’m going to rotate it and I’m going to rotate it and I’m going to look like this
But I thought that after years of observation of neon lights, generally this kind of detached light will be accompanied by poor contact problems, and this kind of dark who can see, I want every word to have a highlight moment
.textb-front {
font-family: YouYuan;
font-size: 64px;
font-weight: normal;
text-transform: uppercase;
stroke: # 340547;
stroke-width: 1px;
stroke-dasharray: 180 280;
animation: grow 2s infinite;
}
@keyframes grow {
50% {
stroke: #f4f2f5;
stroke-width: 2px;
text-shadow: 0px 0px 5px #adabad;}}Copy the codeKnowledge points (knocks on the blackboard)
1, @keyframes as the name implies, keyframes. When the animation needs to make important changes, it needs to set key frames to configure the properties, so that the animation knows when to change and how to change. 50% means the content to change when the animation runs to 50%.
2. Animation, one of the two brothers of CSS animation, the other is transition. Animation emphasizes process and control. It controls the change of one or more attributes of an element and can have multiple keyframes (animation and @keyframes are used together).
@keyframes = @keyframes; @keyframes = @keyframes; @keyframes = @keyframes; @keyframes = @keyframes; @keyframes = @keyframes; } corresponding; 2s is the parameter animation-duration, which indicates how long the animation needs to run. Infinite is the value of the animation-rotund-count argument, which sets the number of times the animation plays. We have infinite loops, so we use infinite;
For specific understanding of animation, you can refer to here. The final effect is as follows:
Three, pick a flower
Last time when we did static neon lights, except for the word “rose”, the flowers were also mutilated. The mutilation proved that there was still a problem with the circuit, so we could not let go of animation
@keyframes flicker { 0% { opacity: 1; Opacity: 0; } 6% { opacity: 1; Opacity: 0; } 8% { opacity: 1; Opacity: 0; opacity: 0; } 10% { opacity: 1; } 89% { opacity: 1; Opacity: 0; Opacity: 0; }}Copy the codeThis time,
.svg-font1 {
fill: none;
stroke: red;
stroke-width: 10;
stroke-dasharray: 880 330;
animation: flicker 5s infinite 3s step-end;
}
.svg-font5 {
fill: none;
stroke: rgb(7, 252, 117);
stroke-width: 10;
animation: flicker 6s infinite step-end;
}
<path class="svg-font1". <path class="svg-font5".Copy the codeThis time we see more parameters of the animation:
1, 3s, this is the value of animation-delay parameter, which represents the start time of animation. I set 3 seconds for one of the two animations, while the other is not set, so that the animation can stagger and appear real.
2, step-end, this is more complicated, there are big guy’s article, I will not say more. Please move on to study
The final result looks like this:
Four, make the frame
What I hope to achieve in the frame is to reflect the effect of scrolling forward visually, using the combination of animation and Keyframes again. Look at the code:
.rect-front {
animation: rectchange 6s infinite step-end;
}
@keyframes rectchange {
0% {
stroke: #c0f015;
stroke-width: 2;
stroke-dasharray: 40 10;
stroke-dashoffset:0%;
}
25% {
stroke: #ff66ff;
stroke-width: 2;
stroke-dasharray: 40 10;
stroke-dashoffset:25%;
}
50% {
stroke: #00EE00;
stroke-width: 2;
stroke-dasharray: 40 10;
stroke-dashoffset:50%;
}
75% {
stroke: #3358ff;
stroke-width: 2;
stroke-dasharray: 40 10;
stroke-dashoffset:75%;
}
100% {
stroke: #c0f015;
stroke-width: 2;
stroke-dasharray: 40 10;
stroke-dashoffset:100%;
}
}
<rect id="rectid" x="12%" y="41%" rx="30" ry="30" width="340" height="90" fill-opacity="0" class="rect-front" />Copy the codeThe only new thing here is stroke-dashoffset, which is the amount of offset relative to the starting point of the drawing, positive (right or clockwise), negative (left or counterclockwise), combined with stroke-dasharray to set different offsets via keyframes, You can get the effect that the wireframe is moving around.
Five, the next word
The word is actually animated with stroke as follows:
.texta-front { font-family: YouYuan; font-size: 64px; font-weight: normal; text-transform: uppercase; The fill opacity: 0.3; stroke-width: 2px; stroke-dasharray: 90 310; animation: text-stroke 6s infinite linear; } .text-1 { stroke:#3498db;
text-shadow: 0 0 5px #3498db;Animation - delay: 1.5 s; } .text-2 { stroke:#f39c12;
text-shadow: 0 0 5px #f39c12;
animation-delay: -3s;
}
.text-3 {
stroke: #e74c3c;
text-shadow: 0 0 5px #e74c3c;Animation - delay: 4.5 s; } .text-4 { stroke:#9b59b6;
text-shadow: 0 0 5px #9b59b6;animation-delay: -6s; } @keyframes text-stroke { 100% { stroke-dashoffset: 1500; }}... <svg> <text id="textaid" text-anchor="middle" x="35%" y="60%" fill-opacity="1" class="texta-front text-1"< span style = "max-width: 100%; clear: both"textaid" text-anchor="middle" x="35%" y="60%" fill-opacity="1" class="texta-front text-2"< span style = "max-width: 100%; clear: both"textaid" text-anchor="middle" x="35%" y="60%" fill-opacity="1" class="texta-front text-3"< span style = "max-width: 100%; clear: both"textaid" text-anchor="middle" x="35%" y="60%" fill-opacity="1" class="texta-front text-4"</text> </ SVG >Copy the codeThe blackboard has been beaten down.
1. The text in each SVG represents a color, and there are as many color dynamic strokes as there are texts of the same word. The color is set in text-1(2,3,4)
2. Animation-delay is used to delay the start of the animation, so that the strokes of different colors are staggered, so that it looks like different colors are on their own strokes
3, the stroke – dashoffset: 1500; This one, as you remember from above, is used to set the offset, and this is the entire length of the stroke, because from the beginning to the end of the animation, you go from zero to the end of the offset. Because the length of the animation is fixed, this number has an interesting effect, the same time, the longer the path, the faster the animation will play, so the higher the number, the faster the stroke will look, so you can try it out.
The end result looks like this:
That’s it. The last chapter is all animated. Let’s go.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — over subtitle line — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — – the audience sitting: I — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — –
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — the ticket: I (welcome to watch) — — — — — — — — — — — — — — — — — — — — — — — — —
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — play: I — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — sweeping the floor, I — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — –
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -, I — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — –
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — – the end of the book — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
The Eiffel Tower
Those who stayed were students who loved Marvel movies and knew there were Easter eggs after the subtitles. Paris rose, there is only one rose, who knows where it is from, in case it is from Dongguan, in order to look closer to Paris, I decided to add an Eiffel Tower.
I first got an Eiffel Tower SVG file from Iconfont alibaba Vector icon library.
Then I used a tool to cut it in half and divide it into two parts, so that it could be easily combined with the previous neon sign. (This part has no technical content, it is just an artist considering the creation. Please have a look, thank you.)
Then you start using the FILTER for SVG
<svg>
<filter id="glow">
<feGaussianBlur id="glowBlur" stdDeviation="1" result="coloredBlur" />
<feMerge>
<feMergeNode in="coloredBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="shock2">
<feTurbulence type="fractalNoise" baseFrequency="0.2" numOctaves="1" seed="2" result="noise" id="noise">
<animate attributeType="XML" attributeName="seed" from="2" to="120" dur="10s"
repeatCount="indefinite" />
</feTurbulence>
<feMorphology id="morph3" in="SourceGraphic" operator="dilate" radius="1" result="morph1" />
<feMorphology id="morph4" in="morph1" operator="dilate" radius="1" result="morph2" />
<feComposite operator="out" in="morph2" in2 ="morph1" result="strokeText" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="strokeText" in2 ="noise"
result="displacementMap" color-interpolation-filters="sRGB" scale="10" />
<feGaussianBlur stdDeviation="5" result="coloredBlur" />
<feMerge>
<feMergeNode in="coloredBlur" />
<feMergeNode in="displacementMap" />
</feMerge>
</filter>
</svg>Copy the codeI won’t go into details about how the filterd combination works, how it works in, and how it works out, because it’s art. If you have the ability to go to YouTube and watch this video, it’s about filter, scroll over here.
Then use a new approach to associate filters with SVG images
<use xlink:href="#tietaupid" id="textShock" x="2" y="2" filter="url(#shock2)" stroke="0" stroke-width="3"
fill="#FFFF00" />
<use xlink:href="#tietaupid" id="textFill" x="0" y="0" fill="white" />
<use xlink:href="#tietaupid" id="textGlow" x="0" y="0" filter="url(#glow)" stroke="#f90" stroke-width="0.1"
fill="transparent" />
<use xlink:href="#tietadownid" id="textShock" x="2" y="2" filter="url(#shock2)" stroke="0" stroke-width="3"
fill="#FFFF00" />
<use xlink:href="#tietadownid" id="textFill" x="0" y="0" fill="white" />
<use xlink:href="#tietadownid" id="textGlow" x="0" y="0" filter="url(#glow)" stroke="#f90" stroke-width="0.1"
fill="transparent" />Copy the codeThe use element is a very powerful and important element in SVG, especially in Web development. Why?
Two points:
- Repeatable call;
- Call across SVG;
This is called repeatable, and we use use to superimpose multiple filters on an SVG image. Filter then use animation to achieve the effect.
Past Events 4
“What I see is 04 room”, the girl looked at me doubtfully, feel I seem to have special understanding to the room number. “My side is the upstairs of 404, 504”, I continued: “So the service error is very normal, this belongs to the internal service error, my problem”. I smiled that special smile again. “So, sorry, I went to 404.” “Don’t worry. Look at the neon I can move. This time, it’s super.”
Outside the window, the neon lights flashed more frequently….
See the source code here
If you want to see it online, you can also go to Codepen