Maison >interface Web >tutoriel CSS >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:063124parcourir
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 :
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!