27.CSS粒子特效

最新推荐文章于 2024-05-29 10:05:45 发布

@大迁世界

最新推荐文章于 2024-05-29 10:05:45 发布

阅读量875

点赞数

分类专栏： CSS特效案例文章标签： css 前端

本文链接：https://blog.csdn.net/qq449245884/article/details/132593113

版权

CSS特效案例专栏收录该内容

40 篇文章 10 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

效果

在这里插入图片描述

源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vanilla JS Particles</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <script type="text/javascript">
  	document.addEventListener("mousemove", function(e){
  		let body = document.querySelector('body');
  		let heart = document.createElement("span");
  		let x = e.offsetX;
  		let y = e.offsetY;
  		heart.style.left = x+'px';
  		heart.style.top = y+'px';
  		let size = Math.random() * 8;
  		let transformValue = Math.random() * 360;
  		heart.style.width = 2 + size+'px';
  		heart.style.height =