问题描述
我在我的标题中使用了 Particles-js 库,它很酷,但问题是我放在 #Particle-js
内的文本内容后面没有与鼠标相关的交互(放在边框内更好感知),这意味着您无法在放入的内容区域上移动或生成粒子!
有什么方法可以修复它并使交互在整个 #Particle-js
上可用?
<!doctype html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
#particles-js {
height: 100vh;
max-width: 100%;
overflow: hidden;
position: relative;
}
#particles-js .content {
margin-bottom: 100px;
}
</style>
</head>
<body>
<header id="particles-js" class="bg-dark d-flex align-items-center">
<div class="container content d-flex flex-wrap flex-column justify-content-center align-items-center position-absolute">
<div class="p-5 mb-5 w-100 border" id="iAm">
<span class="fill d-block">Hi,<br>I'm
<span class="firstLetter">D</span>orothy
<a href="#" class="">Contact me!</a>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
// There were no CDNs for the two scripts below,they are so light you can download the zip file from https://vincentgarreau.com/particles.js/
<script src="particles.js-master/particles.js"></script>
<script src="particles.js-master/demo/js/app.js"></script>
</body>
</html>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)