CSS implementation tiktok text dithering effect example

Time:2021-10-25

The front-end students will blush because of some dynamic effects and design competition in daily development. The design hopes to be realized by code. The front-end should design a GIF diagram. Finally, no one will let anyone. The design has gone, leaving the front-end to work overtime alone

CSS technology is a skill that the front end must master, not only master, but also master. Now, with the trend of rampant front-end frameworks, programmers have fewer and fewer opportunities to write styles. In component-based development, there is almost no need to write a line of CSS code for a page. Even if you don’t write, you must understand the principle behind it.

From the perspective of web page performance, JS is never used for animations that can be realized with CSS, and GIF is never used for animations that can be realized with JS. When executing animations, CSS can call the GPU of the machine to execute, and the performance is naturally much better than JS. The text jitter of the above tiktok can be realized by CSS animation. By changing the shadow direction of the text, the fuzzy effect of the cyclic animation frame can be set. It will be much easier to know the principle. You might as well try to figure it out more at ordinary times.

The renderings are as follows:

Attach 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 is the end of this article about CSS implementation of tiktok text dithering effect example. For more relevant CSS text dithering content, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!