Tutoriel d'animation CSS : Apprenez étape par étape à implémenter l'effet spécial boule de foudre

Tutoriel d'animation CSS : vous apprendrez étape par étape comment implémenter l'effet spécial boule de foudre

Dans la conception Web, les effets d'animation peuvent ajouter une sensation vivante à la page et attirer l'attention de l'utilisateur. L'animation CSS est l'un des moyens simples et efficaces d'obtenir ces effets. Cet article explique comment créer un effet de boule de foudre via CSS pour rendre votre page plus intéressante et dynamique.

Tout d’abord, nous devons préparer une structure HTML de base. Voici un exemple simple :

<div class="container">
   <div class="ball"></div>
</div>

Cette structure contiendra un élément conteneur et un élément sphère. Ensuite, nous devons ajouter des styles à ces éléments.

Tout d'abord, nous ajoutons quelques styles à l'élément conteneur :

.container {
   width: 500px;
   height: 500px;
   position: relative;
   background-color: #000;
   overflow: hidden;
}

Ici, nous définissons le conteneur sur une zone carrée d'une largeur et d'une hauteur de 500 px, utilisons le positionnement relatif et définissons sa couleur d'arrière-plan sur noir. De plus, nous définirons également sa propriété overflow sur masqué pour garantir que l'élément sphérique n'est pas visible lorsqu'il dépasse la portée du conteneur.

Ensuite, nous ajoutons un style à l'élément sphérique :

.ball {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   position: absolute;
   background-color: #f00;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   animation: lightning 2s infinite;
}

Ici, nous définissons l'élément sphérique sur un cercle d'une largeur et d'une hauteur de 100 px et utilisons un positionnement relatif par rapport au conteneur. Nous définissons ensuite sa couleur d'arrière-plan sur rouge et sa position au centre horizontal et vertical du conteneur. Utilisez l'attribut transform et la fonction translate pour centrer l'élément sur lui-même. transform属性和translate函数来将元素在其自身的中心定位。

此外，我们还为球形元素添加了一个名为lightning的动画。这个动画将会在2秒内无限循环播放。下面是动画的具体定义：

@keyframes lightning {
   0% {
      box-shadow: 0 0 5px 5px #fff, 0 0 10px 10px #fff;
   }
   50% {
      box-shadow: 0 0 20px 20px #fff, 0 0 30px 30px #fff;
   }
   100% {
      box-shadow: 0 0 5px 5px #fff, 0 0 10px 10px #fff;
   }
}

在这里，我们使用了@keyframes

rrreee

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!