Maison > Article > interface Web > Guide d'animation CSS : vous apprenez étape par étape comment créer des effets de vol

Guide d'animation CSS : vous apprenez étape par étape comment créer des effets de vol

王林original: 2023-10-19 10:41:081081parcourir

Guide danimation CSS : vous apprenez étape par étape comment créer des effets de vol

Guide d'animation CSS : vous apprenez étape par étape comment créer des effets spéciaux volants

Introduction : CSS (Cascading Style Sheets) est une technologie très importante dans la conception Web et peut être utilisée pour définir le style et la mise en page des pages Web. . Parmi les différents effets, l’effet de vol est très populaire. Dans cet article, nous vous apprendrons étape par étape comment créer un effet de vol à l'aide de CSS et vous fournirons des exemples de code spécifiques.

1. Créer une structure HTML

Tout d'abord, nous devons créer une structure HTML pour accueillir nos effets de vol. Voici un exemple de code de la structure HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>飞翔特效</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div class="bird"></div>
  </body>
</html>

Nous avons introduit un fichier de feuille de style nommé styles.css dans la balise pour configurer Flying. Style d'effets spéciaux. 标签中引入了一个名为 styles.css 的样式表文件，用于设置飞翔特效的样式。

二、添加 CSS 样式

接下来，我们需要添加 CSS 样式来创建飞翔特效。在 styles.css 文件中，我们可以使用以下代码：

.bird {
  width: 100px;
  height: 100px;
  background-color: #FFD700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fly 4s infinite;
}

@keyframes fly {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

在上述代码中，我们首先对 .bird 类的元素设置了宽度和高度，并给它设置了背景颜色。使用 position: absolute; 将元素定位到居中位置。

我们使用 transform 属性来设置元素的位移和旋转状态。translate(-50%, -50%)将元素在水平和垂直方向都向左和向上移动50%的距离，以使其居中。

然后，我们创建了一个名为 fly 的关键帧动画。在 0% 的时候元素未发生任何变化，50% 的时候元素向右旋转了180度，100%

2. Ajouter des styles CSS

Ensuite, nous devons ajouter des styles CSS pour créer des effets de vol. Dans le fichier styles.css, on peut utiliser le code suivant :

rrreee

Dans le code ci-dessus, on définit d'abord la largeur et la hauteur de l'élément du .bird classe et définissez une couleur d’arrière-plan pour celle-ci. Utilisez position: Absolute; pour centrer l'élément.

Nous utilisons l'attribut transform pour définir l'état de déplacement et de rotation de l'élément. translate(-50%, -50%)Déplace l'élément de 50 % vers la gauche et vers le haut, horizontalement et verticalement, pour le centrer.

Ensuite, nous avons créé une animation d'images clés appelée fly. Lorsque 0%, l'élément ne change pas. Lorsque 50%, l'élément pivote de 180 degrés vers la droite. Lorsque 100%, l'élément. pivote de 180 degrés vers la droite. Retour à l'état initial. Cet effet d'animation se déroulera en boucle et durera 4 secondes.

3. Démonstration des résultats🎜🎜Après avoir terminé les opérations ci-dessus, nous pouvons ouvrir le fichier HTML dans le navigateur et voir l'effet d'un oiseau avec des effets spéciaux de vol. 🎜🎜Résumé : 🎜🎜À travers cet article, nous avons appris à utiliser CSS pour créer des effets de vol. Nous avons d'abord créé une structure HTML pour afficher les effets spéciaux, puis utilisé CSS pour définir les styles pertinents, y compris la position et l'animation des éléments. Enfin, en ouvrant le fichier HTML dans le navigateur, on peut observer les magnifiques effets de vol. 🎜🎜J'espère que grâce aux conseils de cet article, vous pourrez apprendre à utiliser CSS pour créer des effets de vol et l'appliquer davantage à votre propre conception Web. 🎜

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!

css html 循环样式表 position transform

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment obtenir une navigation fluide avec défilement des pages Web via CSSArticle suivant：Comment obtenir une navigation fluide avec défilement des pages Web via CSS

Articles Liés

Voir plus