Use CSS3 to simulate typing effects (code example)

This article will introduce how to use CSS3 to simulate Chinese/English typing effects through code examples. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Recommended: css video tutorial

##1. Principle of using CSS3 to achieve typing effects

To simulate the effect of typing, the characters need to be displayed gradually one by one.

Here, by changing the width of the container, the width of the container gradually increases from 0. The width of each increase is the width of each character, so that the effect of typing can be simulated.

In order to enhance the authenticity, you can add a cursor flashing effect, so that you can better simulate the typing effect.

Points to be implemented:

• How to use CSS to gradually increase the width of the text container

• How to make the width of the container increase each time equal to the width of each character

• How to simulate the blinking effect of the cursor

Corresponding implementation Method:

• Use animation in CSS3 to achieve animation effects

• Use steps in animation to implement step-by-step animation

• Use the right border animation of the text container to achieve the cursor blinking effect

2. Implementation

1. English typing effect

html：

<h1 id="A-nbsp-miss-nbsp-is-nbsp-as-nbsp-good-nbsp-as-nbsp-a-nbsp-mile">A miss is as good as a mile.</h1>

css implementation:

@keyframes typing {
    from { width: 0}
}
@keyframes blink-caret {
    50% { border-color: transparent; }
}
 
h1 {
    font: 200% monospace;
    border-right: .08em solid;
    width: 28ch;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 10s steps(28, end),
               blink-caret .5s step-end infinite alternate; //这里的alternate是为了让光标闪烁的正常一点
}

Because the English typing effect is achieved here, the font uses a fixed-width font: monospace, with the length unit ch (

1ch is the width of the number 0 in the current font ). In a fixed-width font, the width of other characters is also equal to 1ch. In this way, you can set the width of the text container = the number of all characters * 1ch.

Let the width of the text container gradually increase from 0 to the actual width using animation steps.

steps can divide the animation into a number of steps to play. Like here, because there are 28 characters, and to display each character one by one, the continuous animation is divided into 28 steps to play.

blink-caret animation is to achieve the blinking effect of the cursor, by changing the transparency of the right border and playing it repeatedly.

2. Chinese typing effect

Chinese typing effect and The difference with English is that under the monospace font, one Chinese character is equal to 2ch, so the width of the text container = the number of Chinese characters * 2ch.

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of Use CSS3 to simulate typing effects (code example). For more information, please follow other related articles on the PHP Chinese website!