Comment faire glisser et apparaître des images avec CSS-tutoriel CSS-php.cn

Comment faire glisser et apparaître des images avec CSS

WBOY

Libérer： 2021-12-09 17:52:56

original

6167 Les gens l'ont consulté

Méthode : 1. Utilisez l'instruction "picture element {animation: name time}" pour lier l'animation coulissante à l'élément d'image ; 2. Utilisez le "@keyframes name {0%{transform:translateX(-sliding distance)} }" pour définir. Utilisez simplement l'action d'animation coulissante pour laisser l'image glisser et apparaître lentement.

Comment faire glisser et apparaître des images avec CSS

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment faire glisser et apparaître des images en CSS

En CSS, vous pouvez utiliser les attributs d'animation et les règles @keyframes pour obtenir l'effet de glissement et d'apparition des images grâce aux règles @keyframes, vous pouvez créer des animations. La syntaxe de l'attribut

animation est la suivante :

animation: name duration timing-function delay iteration-count direction;

Copier après la connexion

où :

Comment faire glisser et apparaître des images avec CSS

Le principe de la création d'une animation est de changer progressivement un ensemble de styles CSS en un autre ensemble de styles. Vous pouvez modifier cet ensemble de styles CSS plusieurs fois au cours de l'animation.

Spécifiez l'heure à laquelle le changement se produit en pourcentage, ou via les mots-clés "de" et "à", qui sont équivalents à 0% et 100%. 0% est l'heure de début de l'animation, 100% est l'heure de fin de l'animation. Pour une meilleure prise en charge du navigateur, vous devez toujours définir des sélecteurs 0 % et 100 %.

Il existe également un attribut de transformation utilisé pour définir l'action de glissement de l'image. La propriété transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
img{
animation:fadenum 5s;
}
@keyframes fadenum{
  0%{transform:translateX(-420px);}
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment faire glisser et apparaître des images avec CSS