Maison > Article > interface Web > Comment utiliser le canevas pour créer des effets d'animation de fontaine de particules

Comment utiliser le canevas pour créer des effets d'animation de fontaine de particules

php中世界最好的语言original: 2017-11-24 14:10:063045parcourir

Cette fois, je vais vous montrer l'effet de l'utilisation d'un canevas pour créer une animation de fontaine de particules. Comment utiliser un canevas pour créer une animation de fontaine de particules. À quels aspects faut-il prêter attention dans l'animation d'une fontaine de particules sur canevas ? cas d'abord

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>canvas粒子喷泉动画</title>
         <meta name="keywords" content=" canvas粒子喷泉动画" />
         <meta name="description" content=" canvas粒子喷泉动画" />
         <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>鼠标点击，增加粒子喷泉效果</div>
<canvas id="fireworks"></canvas>
<script src="js/index.js"></script>
</body>
</html>
Css部分：
body,
html,
canvas {
  margin: 0;
  padding: 0;
  background-color: #111;
  overflow: hidden;
}
 
canvas {
  background-color: transparent;
  position: relative;
  z-index: 2;
}
 
.text {
  position: absolute;
  left: 0;
  top: 20px;
  width: 100%;
  text-align: center;
  font-size: 3.7vw;
  color: #fff;
  z-index: 1;
  opacity: 0.2;
}

Ce qui précède est l'ensemble du processus d'utilisation du canevas pour créer une animation de fontaine de particules. Les amis qui sont intéressés peuvent le faire eux-mêmes. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur PHP. Site chinois !

Lecture connexe :

Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Comment utiliser les propriétés d'animation CSS3

Comment utiliser l'ombre de la police CSS3 text-shadow

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!

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 réaliser une animation de l'affichage de la couverture de l'image en CSS3Article suivant：Comment réaliser une animation de l'affichage de la couverture de l'image en CSS3

Articles Liés

Voir plus