我想制作一个网站,使用particle.js
我想要一个名为 bar 的侧导航栏在悬停时制作动画,但是当我包含particle.js
文件时动画不起作用。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="main.css">
<script src="http://api.jquery.com/hover/"></script>
</head>
<body >
<div id="atoms">
<div class="container">
<a>LOGO<a>
<span class="bar" id="bar1"></span>
<span class="bar" id="bar2"></span>
<span class="bar" id="bar3"></span>
</div>
</div>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
这是 html 代码,需要在悬停时移动条形图 CSS 代码如下。
html,body{
background:black;
}
html{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body{
font:normal 75% Arial, Helvetica, sans-serif;
}
canvas{
display:block;
vertical-align:bottom;
margin-top:-5%;
}
.container
{
background:transperant;
color:white;
text-align:center;
font-size: 80px;
border-radius:25px;
cursor: pointer;
}
.container a
{
cursor:pointer;
animation: change infinite 3s;
}
@-webkit-keyframes change {
from {
color:green;
}
to {
color:yellow;
}
}
.container .bar
{
width:30px;
height:2px;
padding:1px;
background:teal;
display:block;
margin-left:1%;
margin-top:-5%;
}
#bar1
{
margin-top:-5%;
}
#bar2
{
margin-top:0.5%;
}
#bar3
{
margin-top:0.5%;
}
.bar-move{
width:2%;
margin-left:2%;
transition:0.9s;
}
Javasript 代码有 3 个部分particle.js
,app.js
和main.js
.
particle.js
并app.js
没有太大变化,但这里有main.js
。
$(".container .bar").hover(
function () {
$(this).addClass("bar-move");
},
function () {
$(this).removeClass("bar-move");
}
);
在我的 js 函数中,我尝试添加一个类并删除另一个类。