Comment utiliser le canevas pour créer des effets d'animation de fontaine de particules-tutoriel CSS-php.cn

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

php中世界最好的语言

Libérer： 2017-11-24 14:10:06

original

3044 Les gens l'ont consulté

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

Copier après la connexion

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!