Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to achieve text jitter in CSS3". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "CSS3 how to achieve the text jitter effect" bar!

Basic description

Text-shadow: X axis Y axis blur color

The four parameters are X axis, Y axis, shadow blur size and shadow color. You can set multiple shadow effects.

Give an example

1. No values are set for its X-axis and Y-axis, so it will happen in itself.

Text-Shadow

2. X axis and Y axis change positive value, positive value X axis to the right, positive value Y axis down.

Text-Shadow

3. The negative values of X axis and Y axis are changed, negative X axis is left, negative Y axis is upward.

Text-Shadow

4. Multi-parameter

Text-Shadow

Jump up.

Code

@ keyframes animate-my {

0% {

Text-shadow:0 1px 0 # d8d8d8

0 2px 0 # d8d8d8

0 3px 0 # d8d8d8

Transform:translateY (0)

}

50% {

Text-shadow:0 1px 0 # d8d8d8

0 2px 0 # d8d8d8

0 3px 0 # d8d8d8

0 10px 5px red

Transform:translateY (- 20px)

}

100% {

Text-shadow:0 1px 0 # d8d8d8

0 2px 0 # d8d8d8

0 3px 0 # d8d8d8

Transform:translateY (0)

}

}

At this point, I believe you have a deeper understanding of "CSS3 how to achieve text jitter effect", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.