The fault art, the English name is glitch, is often seen in many cyberpunk works. In fact, it is intended to show a small fault effect of a display device. The iconic icon is actually the effect. Let's look at this icon.
The red and blue offset in this icon is actually a kind of fault art. When I see this, I can think that when my family didn't have cable TV in the early years, the signal of the antenna to the TV signal was poor, that is, it was punching and kicking in front of the TV. Now, I can see this artistic effect very much.
A: Why haven't I met such a scene?
Me: You can see it when you throw the flat plate on the ground.
A: (the completion of the local tyrant action) I dumped, I haven't seen it yet.
Me: I'll give you an analogy. Why do you take it seriously?
A: I must see it!
Me: Or you stamp a few more feet.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Let's first achieve a dynamic jitter fault effect. First, we need to have a clean jitter icon. I'm from Vector icon library Find, because it supports the SVG format, the resulting SVG code is like this.
<svg id="douyin" t="1570181112474" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2916" width="128" height="128"> <path d="M937.386667 423.850667a387.84 387.84 0 0 1-232.874667-77.824v352.341333C704.512 878.250667 565.930667 1024 394.922667 1024S85.333333 878.250667 85.333333 698.368c0-179.882667 138.581333-325.632 309.589334-325.632 17.066667 0 33.706667 1.450667 49.92 4.266667v186.624a131.754667 131.754667 0 0 0-48.64-9.216c-76.288 0-138.154667 65.024-138.154667 145.322666 0 80.213333 61.866667 145.322667 138.24 145.322667 76.202667 0 138.069333-65.109333 138.069333-145.322667V0h172.714667c0 134.485333 103.68 243.541333 231.594667 243.541333v180.309334h-1.28" p-id="2917"></path> </svg>
The figure you see looks like this.
Note that there is no color in the SVG code. The black in the picture is for you to see clearly. Let's first show the white, blue and red three-layer tremolo icons. The code is as follows:
<use xlink:href="#douyin" x="0%" y="10%" class="douyin1" /> <use xlink:href="#douyin" x="0%" y="10%" class="douyin2" /> <use xlink:href="#douyin" x="0%" y="10%" class="douyin" />
/* white */ .douyin { fill: #fff; } /* blue */ .douyin1 { fill: #25f4ee; } /* Red */ .douyin2 { fill: #fe2c55; }
Fill in white, red and blue respectively. In SVG, the back will cover the front, so put white in the front, because the position of the three is overlapping, so you can only see white.
Let's set up the white animation effect again.
@keyframes glitch1 { 0% { transform: none; opacity: 1; } 7% { transform: skew(-2.5deg, -0.9deg); opacity: 0.75; } 10% { transform: none; opacity: 1; } 27% { transform: none; opacity: 1; } 30% { transform: skew(1.8deg, -0.1deg); opacity: 0.75; } 35% { transform: none; opacity: 1; } 52% { transform: none; opacity: 1; } 55% { transform: skew(-1deg, 1.2deg); opacity: 0.75; } 60% { transform: none; opacity: 1; } 72% { transform: none; opacity: 1; } 75% { transform: skew(0.4deg, -1deg); opacity: 0.75; } 80% { transform: none; opacity: 1; } 100% { transform: none; opacity: 1; } }
The white animation is very small, because I only do some slight tilt effect, feel the picture is shaking, using transform: skew(). Transform is an attribute of css. It mainly sets the deformation effect. Skew is used here to achieve the tilt effect. In addition, opacity is used to deal with the transparency, which is used to show the brightness change when the signal fails.
We then set the animation effect of the blue icon:
@keyframes glitch2 { 0% { transform: none; opacity: 0.25; } 7% { transform: translate(-4px, -6px); opacity: 0.5; } 10% { transform: none; opacity: 0.25; } 27% { transform: none; opacity: 0.25; } 30% { transform: translate(-7px, -4px); opacity: 0.5; } 35% { transform: none; opacity: 0.25; } 52% { transform: none; opacity: 0.25; } 55% { transform: translate(-5px, -2px); opacity: 0.5; } 60% { transform: none; opacity: 0.25; } 72% { transform: none; opacity: 0.25; } 75% { transform: translate(-4px, -6px); opacity: 0.5; } 80% { transform: none; opacity: 0.25; } 100% { transform: none; opacity: 0.25; } }
Here is also the use of transform deformation, but the effect is translate, the official name is 2D conversion, in fact, translation effect, can be moved horizontally and longitudinally, we see the image of tremble, blue part is in the upper left of the white icon, so the set value of translate is negative, which is the translation of the upper left.
The red part is similar, except that the translate values are positive, indicating the translation at the lower right. The code is as follows:
@keyframes glitch3 { 0% { transform: none; opacity: 0.25; } 7% { transform: translate(4px, 6px); opacity: 0.5; } 10% { transform: none; opacity: 0.25; } 27% { transform: none; opacity: 0.25; } 30% { transform: translate(7px, 4px); opacity: 0.5; } 35% { transform: none; opacity: 0.25; } 52% { transform: none; opacity: 0.25; } 55% { transform: translate(5px, 2px); opacity: 0.5; } 60% { transform: none; opacity: 0.25; } 72% { transform: none; opacity: 0.25; } 75% { transform: translate(4px, 8px); opacity: 0.5; } 80% { transform: none; opacity: 0.25; } 100% { transform: none; opacity: 0.25; } }
Finally, add the animation effect to the css class, and change the previous css code to this
.douyin { fill: #fff; /*Animation*/ animation: glitch1 3s infinite; } .douyin1 { fill: #25f4ee; animation: glitch2 3s infinite; } .douyin2 { fill: #fe2c55; animation: glitch3 3s infinite; }
The animation effect is set to 3 seconds, infinite cycle, the final product effect is as follows:
Online effects please move codepen.io
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
The above is a dynamic imitation of the official icon of tremolo, but as a cyberpunk artist (yes, I've been an artist for several weeks), I think that although this effect fits the tremolo temperament very well, it's still a long way from what I imagined, and I decided to add some more effects, more cyberpunk.
Here I will use a responsible svg filter, code as follows:
<filter id="filter"> <feTurbulence type="turbulence" baseFrequency="0.01 0.15" numOctaves="2" seed="5" stitchTiles="stitch" result="turbulence" /> <feColorMatrix type="saturate" values="30" in="turbulence" result="colormatrix" /> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 150 -15" in="colormatrix" result="colormatrix1" /> <feDisplacementMap in="SourceGraphic" in2="colormatrix1" scale="10" xChannelSelector="R" yChannelSelector="A" result="displacementMap" /> </filter>
This is a combined filter effect, the specific division of labor is as follows:
- feTurbulence uses Perlin noise function to create an image. It implements artificial texture such as moire and marbling, and I used it before making clouds. The main purpose here is to achieve the effect of interference signal.
- feColorMatrix transforms colors based on the transformation matrix, where white, blue and red colors can be mixed to produce a color interference effect where the three colors are superimposed.
- The feDisplacementMap is actually a position replacement filter, which changes the pixel positions of elements and graphics. Here, the final result of the interference effect is obtained by changing the position of the dithered image (Source Graphic) and the result after the feColorMatrix/feTurbulence filter.
Finally, we add this filter to the animation effect. Let's take one of the three keyframe s and look at the code. The other two are the same.
@keyframes glitch1 { 0% { transform: none; opacity: 1; } 7% { transform: skew(-2.5deg, -0.9deg); filter: url(#filter); opacity: 0.75; } 8% { filter: none; } 10% { transform: none; opacity: 1; } 27% { transform: none; opacity: 1; } 30% { transform: skew(1.8deg, -0.1deg); filter: url(#filter); opacity: 0.75; } 31% { filter: none; } 35% { transform: none; opacity: 1; } 52% { transform: none; opacity: 1; } 55% { transform: skew(-1deg, 1.2deg); filter: url(#filter); opacity: 0.75; } 56% { filter: none; } 60% { transform: none; opacity: 1; } 72% { transform: none; opacity: 1; } 75% { transform: skew(0.4deg, -1deg); filter: url(#filter); opacity: 0.75; } 76% { filter: none; } 80% { transform: none; opacity: 1; } 100% { transform: none; opacity: 1; } }
filter: url(#filter) is a statement that calls svg filter. Notice that every time you call this, you add this sentence at the end.
31% { filter: none; }
This is to make the filter effect appear instantaneously, disappear instantaneously, and make the fault effect more realistic. The final results are as follows:
See online effects codepen.io
See the source code Here