interface Web
tutoriel CSS
Comment créer plusieurs transitions sur un élément en utilisant CSS ?
Comment créer plusieurs transitions sur un élément en utilisant CSS ?
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Faire votre première transition Svelte personnalisée
Mar 15, 2025 am 11:08 AM
L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Show, ne dit pas
Mar 16, 2025 am 11:49 AM
Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Créer votre propre bragdoc avec Eleventy
Mar 18, 2025 am 11:23 AM
Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.
Un peu sur CI / CD
Apr 02, 2025 pm 06:21 PM
Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:
Vue 3
Apr 02, 2025 pm 06:32 PM
Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.
Utilisons (x, x, x, x) pour parler de spécificité
Mar 24, 2025 am 10:37 AM
Je discutais avec Eric Meyer l'autre jour et je me suis souvenu d'une histoire d'Eric Meyer de mes années de formation. J'ai écrit un article de blog sur la spécificité CSS, et
