Front end students in the daily development will be exciting because of some dynamic effect and design competition blush, design hope to use code to achieve, front end to design a GIF picture, finally who also don’t let who, the design went, leaving the front end alone to work overtime……
CSS technology is a front-end must master a skill, not only to master, but also to master. Now that front-end frameworks are rampant, programmers have fewer and fewer opportunities to write styles, component development, a page rarely need to write a line of CSS code. Even if you don’t write it, you must understand the principle behind it.
From the point of view of web page performance, the animation that can be realized with CSS will never use JS, and the animation that can be realized with JS will never use GIF. When executing the animation, CSS can call the GPU of the machine to execute, and the performance naturally has much more advantages than JS. TikTok text jitter above can be achieved with CSS Animation by changing the direction of the text shadow and setting the blur effect of the animation frame loop. It’s a lot easier if you know how it works. Try to figure it out more often.
Attach a code
body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; } h2 { color: #fff; font-family: sans-serif; font-size: 4em; Animation: Animate 0.5s linear infinite; } @frames animate {0%, 100% {text-shadow: -15px -15px 0 #0ff, 15px 15px 0 #f00; } text-shadow: 1.5px 1.5px 0 #0ff, -1.5px -1.5px 0 #f00; }} 50% {text-shadow: 1.5px -1.5px 0 #0ff, 1.5px -1.5px 0 #f00; } text-shadow: -1.5px 1.5px 0 #0ff, -1.5px 1.5px 0 #f00; }}Copy the code