In daily development, front-end students often argue over some animations and designs. The designers want to implement them with code, while the front-end designers want to design gif images. In the end, no one gives in, the designers leave, and the front-end designers are left to work overtime alone... CSS technology is a skill that must be mastered by the front-end. Not only must it be mastered, but it must also be proficient in. With the current trend of front-end frameworks being prevalent, programmers have fewer and fewer opportunities to write styles. With component-based development, there is hardly a need to write a single line of CSS code for a page. Even if you don't write it, you must understand the principle behind it. From the perspective of web page performance, animations that can be implemented with CSS should never use JS, and animations that can be implemented with JS should never use GIF. When executing animations, CSS can call the machine's GPU to execute, so its performance is naturally much better than JS. The above TikTok text shaking can be achieved using CSS animation by changing the shadow direction of the text and setting the blur effect of the looped animation frame. Knowing the principle will be much simpler. You might as well think about it more often in your daily life. The effect diagram is as follows: Attach the 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; } @keyframes animate { 0%, 100% { text-shadow: -1.5px -1.5px 0 #0ff, 1.5px 1.5px 0 #f00; } 25% { 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; } 75% { text-shadow: -1.5px 1.5px 0 #0ff, -1.5px 1.5px 0 #f00; } } This concludes this article about how to use CSS to implement TikTok text shaking effects. For more relevant CSS text shaking content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Web front-end skills summary (personal practical experience)
>>: 【HTML element】Detailed explanation of tag text
Preface You should often see this kind of special...
Table of contents 1. What is Function Anti-shake?...
After installing docker, there will usually be a ...
Table of contents 1. Use plugin expressions 2. Us...
Table of contents 1. Get a random Boolean value (...
Table of contents 1. Download nodejs 2. Double-cl...
Application Scenario In many cases, we install so...
Table of contents introduce Key Features Effect d...
Project Documentation Directory Div+CSS Naming Sta...
The same server simulates the master-slave synchr...
mysql set to case insensitive Windows Go to the d...
I recently encountered a problem when doing IM, a...
background Solving browser compatibility issues i...
wangEditor is a web rich text editor developed ba...
Table of contents 1. Introduction to MySQL Index ...