Maison >interface Web >tutoriel CSS >Comment utiliser CSS pour obtenir des effets de mouvement à gauche et à droite
Comment utiliser CSS pour obtenir des effets de mouvement à gauche et à droite
- 青灯夜游original
- 2021-07-14 17:45:143737parcourir
En CSS, vous pouvez utiliser les règles et les attributs d'animation "@keyframes" pour obtenir des effets de mouvement vers la gauche et la droite. La syntaxe principale est "@keyframes animation name {0% {left:0px;}50%{left:200px;}. 100 % {gauche :0px;}}".
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
En CSS, vous pouvez utiliser les règles et les attributs d'animation "@keyframes" pour obtenir des effets de mouvement vers la gauche et la droite.
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
0% {left:0px;}
50%{left:200px;}
100% {left:0px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
0% {left:0px;}
50%{left:200px;}
100% {left:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendu :
Description :
En utilisant les règles @keyframes, vous pouvez créer des animations. L'animation est créée en passant progressivement d'un paramètre de style CSS à un autre.
Vous pouvez modifier les paramètres de style CSS plusieurs fois pendant le processus d'animation.
Spécifiez quand le changement se produit en utilisant %, ou les mots-clés « de » et « à », qui sont identiques à 0 % à 100 %. 0% correspond au démarrage de l'animation, 100% correspond à la fin de l'animation.
Syntaxe :
@keyframes animationname {keyframes-selector {css-styles;}}| valeur | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| nom de l'animation | Requis. Définissez le nom de l'animation. Défini par l'attribut d'animation. | ||||||||
| sélecteur d'images clés | Obligatoire. Pourcentage de la durée de l'animation.
0-100% de (identique à 0%) à (100% pareil)🎜🎜🎜Remarque :🎜 Vous pouvez utiliser un sélecteur d'images clés animé. 🎜 |
||||||||
| styles CSS | Obligatoire. Un ou plusieurs attributs de style CSS légaux |
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!