Explication détaillée de la façon d'utiliser les propriétés d'animation CSS3 pour obtenir des effets de carrousel-tutoriel CSS-php.cn

Explication détaillée de la façon d'utiliser les propriétés d'animation CSS3 pour obtenir des effets de carrousel

巴扎黑

Libérer： 2018-05-18 10:57:48

original

4407 Les gens l'ont consulté

L'attribut d'animation de CSS3 peut être utilisé pour contrôler chaque étape de l'animation en contrôlant les images clés tout comme l'animation Flash, obtenant ainsi des effets d'animation plus complexes. A travers cet article, je partagerai avec vous l'effet carrousel basé sur les propriétés d'animation d'animation CSS3. Les amis qui en ont besoin peuvent se référer à

introduction à l'animation :

L'attribut d'animation de CSS3 peut contrôler chaque étape de l'animation en contrôlant les images clés pour obtenir des effets d'animation plus complexes, tout comme l'animation Flash. L'effet d'animation obtenu par l'animation se compose principalement de deux parties :

1) Déclarer une animation à travers des images similaires à celles de l'animation Flash

2) Appeler l'animation déclarée par des images clés dans l'animation ; attribut.

Valeur de l'attribut d'animation :

L'attribut d'animation est un attribut abrégé

Syntaxe : animation : nom durée durée-fonction délai direction du nombre d'itérations ;

Les six attributs d'animation définis par l'animation :

animation-name : spécifie l'image clé à laquelle doit être liée le nom du sélecteur. Valeurs :

aucun : (par défaut) Spécifie aucun effet d'animation (peut être utilisé pour remplacer les animations des cascades).

keyframename : Spécifie le nom de l'image clé qui doit être liée au sélecteur.

animation-duration : Spécifie le temps nécessaire pour terminer l'animation, en secondes ou millisecondes. Valeur :

time : Spécifie le temps nécessaire pour terminer l'animation. La valeur par défaut est 0, ce qui signifie aucun effet d'animation.

animation-timing-function : Spécifie la courbe de vitesse de l'animation. Valeur :

facilité : Par défaut. L'animation démarre à une vitesse lente, puis s'accélère, puis ralentit avant de se terminer.

linéaire : La vitesse d'animation est la même du début à la fin.

ease-in : L'animation démarre à faible vitesse.

ease-out : L'animation se termine à faible vitesse.

facilité d'entrée : l'animation démarre et se termine à une vitesse lente.

cubic-bezier(n,n,n,n) : Définissez vos propres valeurs dans la fonction cubique-bezier. Les valeurs possibles sont des valeurs numériques de 0 à 1.

animation-delay : Spécifie le délai avant le début de l'animation. Valeurs :

time : (facultatif) Définit le temps d'attente avant de démarrer l'animation, en secondes ou millisecondes. La valeur par défaut est 0.

animation-iteration-count : Spécifie le nombre de fois que l'animation doit être jouée. Valeur :

n : Définit le nombre de fois de lecture de l'animation.

infini : Spécifie que l'animation doit être jouée à l'infini.

animation-direction : Spécifie si l'animation doit être jouée à l'envers à tour de rôle. Valeurs :

normal : valeur par défaut. L'animation devrait jouer normalement.

alternative : L'animation doit être jouée à l'envers à tour de rôle.

Carrousel de mise en œuvre de l'animation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮换</title>
    <style type="text/css">
        p,img{
            margin: 0;
            padding: 0;
        }
        .p_first{
            width: 1000px;
            height: 300px;
            margin-top: 100px;
            margin-left: 250px;
            overflow: hidden;
        }
        .p_second{
            width: 4000px;
            position: relative;
            animation: myimg 12s linear infinite normal; 
        }
        @keyframes myimg{
            0{
                left: 0;
            }
            5%{
                left: 0;
            }
            30%{
                left: -1000px;
            }
            35%{
                left: -1000px;
            }
            60%{
                left: -2000px;
            }
            65%{
                left: -2000px;
            }
            95%{
                left: -3000px;
            }
            100%{
                left: -3000px;
            }
        }
    </style>
</head>
<body>
    <p class="p_first">
        <p class="p_second">
            <img src="images/011-1.jpg" alt=""><img src="images/011-2.jpg" alt=""><img src="images/011-3.jpg" alt=""><img src="images/011-1.jpg" alt="">
        </p>
    </p>
</body>
</html>

Copier après la connexion

Les balises d'image doivent être placées sur la même ligne, sinon il y aura des espaces entre les images.

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!