文章/答案/技术大牛

发布

社区首页 >问答首页 >我想用particle.js做一个网站，但是左边的导航栏动画不起作用。

问我想用particle.js做一个网站，但是左边的导航栏动画不起作用。
EN

Stack Overflow用户

提问于 2018-10-27 18:46:48

回答 1查看 317关注 0票数 2

我想做一个使用particle.js的网站，其中我想要一个侧面导航命名为酒吧，以使动画悬停，但动画不工作时，我包括的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函数中，我尝试添加一个类并删除另一个类。

javascript

html

css

particles.js

回答 1

Stack Overflow用户

发布于 2018-10-27 20:10:45

你不能使用CSS转换来处理这个效果吗？

html,
body {
  background: black;
}

.bar {
  width: 30px;
  height: 2px;
  padding: 1px;
  background: teal;
  display: block;
  margin-left: 1%;
  margin-top: -5%;
  transition: all 0.9s;
}

.bar:hover {
width: 2%;
margin-left: 2%;
}

#bar1 {
  margin-top: 0;
}

#bar2 {
  margin-top: 0.5%;
}

#bar3 {
  margin-top: 0.5%;
}

<div class="container">
  <span class="bar" id="bar1"></span>
  <span class="bar" id="bar2"></span>
  <span class="bar" id="bar3"></span>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53021112

复制

相似问题

问我想用particle.js做一个网站，但是左边的导航栏动画不起作用。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想用particle.js做一个网站，但是左边的导航栏动画不起作用。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想用particle.js做一个网站，但是左边的导航栏动画不起作用。
EN