Comment obtenir l'effet de panoramique vers la gauche et de disparition en CSS3-tutoriel CSS-php.cn

Comment obtenir l'effet de panoramique vers la gauche et de disparition en CSS3

WBOY

Libérer： 2021-12-15 18:24:14

original

3610 Les gens l'ont consulté

Méthode : 1. Utilisez l'instruction "animation: name time" pour lier l'animation de disparition de la traduction gauche à l'élément ; 2. Utilisez "@keyframes name {100%{transform: translateX (- translation distance); opacity : 0; }} " L'instruction produit l'effet d'un élément se déplaçant vers la gauche et disparaissant.

Comment obtenir l'effet de panoramique vers la gauche et de disparition en CSS3

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

Comment obtenir l'effet de panoramique vers la gauche et de disparition en CSS3

En CSS, si vous souhaitez obtenir l'effet d'éléments se déplaçant vers la gauche et disparaissant, vous pouvez utiliser les attributs d'animation et les règles @keyframes .

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.

Il existe également l'attribut opacité utilisé pour définir le style transparent de 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>
.div1{
  width:100px;
  height:100px;
  background:pink;
  margin:0 auto;
animation:fadenum 5s;
}
@keyframes fadenum{
  100%{transform:translateX(-200px);opacity:0;}
}
</style>
</head>
<body>
<div class="div1">这是一个向左平移消失的div</div>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment obtenir leffet de panoramique vers la gauche et de disparition en CSS3