Example of implementing TikTok text shaking effect with CSS

Example of implementing TikTok text shaking effect with CSS

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

Recommend

Pure CSS to achieve the water drop animation button in Material Design

Preface You should often see this kind of special...

Implementation and usage scenarios of JS anti-shake throttling function

Table of contents 1. What is Function Anti-shake?...

Docker commands are implemented so that ordinary users can execute them

After installing docker, there will usually be a ...

The difference between Vue interpolation expression and v-text directive

Table of contents 1. Use plugin expressions 2. Us...

13 JavaScript one-liners that will make you look like an expert

Table of contents 1. Get a random Boolean value (...

Install nodejs and yarn and configure Taobao source process record

Table of contents 1. Download nodejs 2. Double-cl...

How to use port 80 in Tomcat under Linux system

Application Scenario In many cases, we install so...

JavaScript to implement voice queuing system

Table of contents introduce Key Features Effect d...

CSS XTHML writing standards and common problems summary (page optimization)

Project Documentation Directory Div+CSS Naming Sta...

How to set mysql to case insensitive

mysql set to case insensitive Windows Go to the d...

Detailed explanation of count(), group by, order by in MySQL

I recently encountered a problem when doing IM, a...

A brief discussion of several browser compatibility issues encountered

background Solving browser compatibility issues i...

Problems with using wangeditor rich text editing in Vue

wangEditor is a web rich text editor developed ba...

Detailed explanation of MySQL database index

Table of contents 1. Introduction to MySQL Index ...