Comment utiliser CSS pour obtenir des effets de mouvement à gauche et à droite-tutoriel CSS-php.cn

Comment utiliser CSS pour obtenir des effets de mouvement à gauche et à droite

青灯夜游

Libérer： 2021-07-14 17:45:14

original

3714 Les gens l'ont consulté

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;}}".

Comment utiliser CSS pour obtenir des effets de mouvement à gauche et à droite

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>

Copier après la connexion

Rendu :

Comment utiliser CSS pour obtenir des effets de mouvement à gauche et à droite

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;}}

Copier après la connexion

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.

值

说明

animationname

必需的。定义animation的名称。由animation属性定义。

keyframes-selector

必需的。动画持续时间的百分比。

合法值：

0-100%
from (和0%相同)
to (和100%相同)

注意： 您可以用一个动画keyframes-selectors。

css-styles

必需的。一个或多个合法的CSS样式属性

Valeur légale :

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

🎜 (Partage vidéo d'apprentissage : 🎜Tutoriel vidéo CSS🎜)🎜

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!