Utilisez CSS3 pour simuler les effets de frappe (exemple de code)

Cet article explique comment utiliser CSS3 pour simuler les effets de frappe en chinois/anglais à travers des exemples de code. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandé : Tutoriel vidéo CSS

Principe d'utilisation de CSS3 pour obtenir des effets de frappe

Pour simuler l'effet de frappe, vous devez afficher les caractères un par un.

Ici, la largeur du conteneur est progressivement augmentée à partir de 0 en modifiant la largeur du conteneur. La largeur de chaque augmentation est la largeur de chaque caractère, afin que l'effet de frappe puisse être simulé.

Afin d'améliorer le réalisme, vous pouvez ajouter un effet de clignotement du curseur, afin de mieux simuler l'effet de frappe.

Points à mettre en œuvre :

• Comment utiliser CSS pour augmenter progressivement la largeur du conteneur de texte

• Comment faire augmenter à chaque fois la largeur du conteneur égale à la largeur de chaque caractère

• Comment simuler l'effet clignotant du curseur

Méthode d'implémentation correspondante :

• Utiliser l'animation en CSS3 pour obtenir des effets d'animation

• Utiliser étapes de l'animation pour mettre en œuvre une animation étape par étape

• Utilisez l'animation de la bordure droite du conteneur de texte pour obtenir l'effet clignotant du curseur

2. Mise en œuvre

1. Effet de frappe en anglais

html :

<h1>A miss is as good as a mile.</h1>

Implémentation CSS :

@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是为了让光标闪烁的正常一点
}

Parce que l'effet de frappe en anglais est obtenu ici, le font utilise une police monospace : monospace, avec l'unité de longueur ch (

1ch est la largeur du chiffre 0 dans la police actuelle Dans une police à largeur fixe, la largeur des autres caractères est également égale à). 1ch. De cette façon, vous pouvez définir la largeur du conteneur de texte = le nombre de tous les caractères * 1ch.

Laissez la largeur du conteneur de texte augmenter progressivement de 0 à la largeur réelle en utilisant des étapes d'animation.

les étapes peuvent diviser l'animation en un certain nombre d'étapes à jouer. Comme ici, car il y a 28 personnages, et pour afficher chaque personnage un par un, l'animation continue est divisée en 28 étapes à jouer.

L'animation clignotant-caret consiste à obtenir l'effet clignotant du curseur, en modifiant la transparence de la bordure droite et en la jouant à plusieurs reprises.

2. Effet de frappe chinoise

Effet de frappe chinoise et la différence avec l'anglais, c'est que sous la police monospace, un caractère chinois est égal à 2ch, donc la largeur du conteneur de texte = le nombre de caractères chinois * 2ch.

Pour plus de connaissances sur la programmation, veuillez visiter :

Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!