Maison > Article > interface Web > Comment créer plusieurs transitions sur un élément en utilisant CSS ?
Comment créer plusieurs transitions sur un élément en utilisant CSS ?
- 王林avant
- 2023-08-26 13:37:02916parcourir
Créer plusieurs transitions sur des éléments à l'aide de CSS est un excellent moyen d'ajouter de l'intérêt et de l'interactivité à votre site Web. En incorporant diverses transitions, nous pouvons créer une expérience dynamique et engageante pour nos utilisateurs. Dans cet article, nous aborderons les bases de la création de plusieurs transitions sur un élément à l'aide de CSS.
Les feuilles de style en cascade (CSS) sont un outil puissant pour styliser les pages Web. L'une de ses fonctionnalités les plus utiles est la possibilité de créer des transitions fluides et visuellement attrayantes entre les différents états d'un élément, par exemple lorsqu'il est survolé ou cliqué.
Que sont les transformations CSS ?
Avant d’apprendre à créer plusieurs transitions, commençons par comprendre ce que sont les transitions CSS. Une transition est un changement progressif entre deux états d'un élément. Par exemple, lorsque l’on survole un bouton, sa couleur de fond passe progressivement d’une couleur à l’autre. CSS nous permet de spécifier la durée et le timing de ces transitions, ainsi que les propriétés à transformer.
Grammaire
css-selector{
transition: property duration timing-function delay;
}
Propriétés de transition en CSS
Les propriétés de transition que nous pouvons utiliser en CSS incluent -
transition-property - Cette propriété spécifie quelles propriétés CSS doivent être transformées.
transition-duration - Cette propriété spécifie la durée de la transition en secondes ou millisecondes. Par défaut, la durée de transition est 0, ce qui signifie qu'aucun effet de transition n'est appliqué.
transition-timing-function - Cette propriété contrôle la vitesse et le timing de la transition.
transition-delay - Cette propriété spécifie le délai avant le début de la transition.
Créer des transformations de base
Pour créer une transition, nous devons spécifier les propriétés que nous souhaitons animer, telles que la durée de la transition, la fonction de synchronisation et les éventuels retards. Par exemple, pour créer une transition pour la largeur d'un bouton, pour cela nous pouvons utiliser le code suivant -
button {
transition: width 0.5s ease-in-out;
}
Le code ci-dessus spécifie que la largeur du bouton changera sur une période de 0,5 seconde à l'aide d'une fonction de synchronisation d'entrée et de sortie facile.
Créez plusieurs transitions
Pour créer plusieurs transitions sur un élément, nous devons ajouter des transitions supplémentaires au code CSS. Par exemple, pour créer un bouton qui convertit à la fois les propriétés de largeur et de couleur d'arrière-plan, nous pouvons pour cela utiliser le code suivant -
button {
transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
Le code ci-dessus spécifie que les propriétés de largeur et de couleur d'arrière-plan du bouton seront converties sur une période de 0,5 seconde à l'aide d'une fonction de synchronisation d'entrée et de sortie facile.
Voici quelques exemples de code complets sur la façon de créer plusieurs transitions sur un élément à l'aide de CSS -
Exemple 1
Dans cet exemple, nous allons créer un bouton avec des propriétés de largeur de bascule et de couleur d'arrière-plan. Cependant, nous utiliserons des durées différentes pour chaque transition afin de créer un effet décalé.
<html>
<head>
<style>
body{
text-align: center;
}
button {
margin: auto;
width: 100px;
height: 50px;
background-color: green;
border: none;
color: #fff;
font-size: 16px;
padding: 10px 20px;
transition: width 0.5s ease-in, background-color 1s ease-out;
}
button:hover {
width: 150px;
background-color: red;
}
</style>
</head>
<body>
<h3>Multiple Transitions with Different Durations</h3>
<button>Hover Me</button>
</body>
</html>
Dans l'exemple ci-dessus, nous définissons une largeur de 100px et une background-color verte pour le bouton. Ensuite, nous définissons les propriétés de transition pour faire la transition entre les propriétés de largeur et de couleur d'arrière-plan. Cependant, nous utilisons une durée de 0,5 seconde pour la transition de largeur et de 1 seconde pour la transition de couleur d'arrière-plan. Cela crée un effet décalé dans lequel la largeur du bouton évolue plus rapidement que la couleur d'arrière-plan. Lorsque la souris est sur le bouton, la largeur s'agrandit jusqu'à 150px et la couleur d'arrière-plan passe au rouge.
Exemple 2
Dans cet exemple, nous allons créer une boîte qui transforme à la fois les propriétés de couleur d'arrière-plan et de rayon de bordure. Cependant, nous utiliserons un délai pour la transition du rayon de bordure.
<html>
<head>
<style>
body{
text-align: center;
}
.box {
margin: auto;
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
transition: background-color 0.5s ease-in-out, border-radius
0.5s ease-in-out 0.5s;
}
.box:hover {
background-color: blue;
border-radius: 0;
}
</style>
</head>
<body>
<h3>Multiple Transitions with Delays</h3>
<div> Hover over the below circle to see multiple transitions</div>
<div class="box"></div>
</body>
</html>
Dans l'exemple ci-dessus, nous définissons la largeur et la hauteur de la boîte sur 200 px et la couleur d'arrière-plan sur rouge. Ensuite, nous définissons les propriétés de transition pour faire la transition entre les propriétés de couleur d'arrière-plan et de rayon de bordure. Cependant, nous utilisons un délai de 0,5 seconde pour la transition du rayon limite. Cela signifie que la couleur d'arrière-plan effectuera une transition immédiatement, tandis que le rayon de la bordure attendra 0,5 seconde avant de faire la transition. Lorsque la souris survole la boîte, la couleur d'arrière-plan passe au bleu et le rayon de la bordure devient 0, créant ainsi un carré.
Exemple 3
Ici, nous allons créer un bouton qui peut transformer les propriétés de largeur et de couleur. Cependant, nous utiliserons différentes fonctions de timing pour chaque transition afin de créer des effets uniques.
<html>
<head>
<style>
body{
text-align: center;
}
button {
margin: auto;
width: 120px;
height: 60px;
background-color: blue;
border: none;
color: red;
font-size: 18px;
padding: 10px 20px;
transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
color 1s ease-in-out;
}
button:hover {
width: 180px;
color: #fff;
}
</style>
</head>
<body>
<h3>Multiple Transitions with Different Timing Functions</h3>
<button>Hover Me</button>
</body>
</html>
Dans l'exemple ci-dessus, nous définissons la largeur du bouton sur 120 px, la couleur d'arrière-plan sur bleu, puis définissons les propriétés de transition pour faire la transition entre les propriétés de largeur et de couleur. Cependant, nous utilisons une fonction de timing différente pour chaque transition. La transition de largeur utilise une fonction de Bézier cubique personnalisée. Lorsque la souris survole le bouton, la largeur s'étend jusqu'à 180 pixels et la couleur du texte passe du rouge au blanc.
Conclusion
Les transitions CSS sont un outil puissant pour créer des effets fluides et visuellement attrayants sur les pages Web. En utilisant les propriétés de transition, nous pouvons spécifier la durée, la fonction de synchronisation et les propriétés en cours de transition. Nous pouvons également créer plusieurs transitions sur un élément en spécifiant plusieurs propriétés dans l'attribut transition.
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!