Maison > interface Web > tutoriel CSS > le corps du texte

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
3062 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal