Question

我想用这个：

https://gyazo.com/ca1e33a319111fd779e96ff890ec9b9b

为我现有网页的正文设置动画。

      <!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login - CloudMe - Responsive Web Hosting HTML Template</title>
    <link rel="shortcut icon" href="images/icons/favicon.png" />
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/animate.min.css" />
    <link rel="stylesheet" href="css/morphext.css" />
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="javascript" href="javascript/app.js">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <link rel="stylesheet" href="css/slicknav.css">
    <link rel="stylesheet" href="style.css" />
    <script src="js/vendor/modernizr.js"></script>
    <script type='text/javascript' src='../jquery.particleground.js'></script>
    <script type='text/javascript' src='js/demo.js'></script>





  </head>
  <body class="login-page">

<!--  HEADER -->

<header class="login">
<div class="top">
  <div class="row">
  <div class="small-12 large-3 medium-3 columns">
   <div class="logo">
   <a href="index.html" title=""><img src="images/logo.png" alt="" title=""/></a>
   </div>
</div>

<div class="small-12 large-9 medium-9 columns">

<!--  NAVIGATION MENU AREA -->
     <nav class="desktop-menu">
     <ul class="sf-menu">
         <li class="special"> <a href="index.html"><font size="4"><b>HOME</b></a>
             <ul>
                <li><a href="index.html#features"><font size="2"><font size="2"><b>FEATURES</a></li>
                <li><a href="index.html#gameselection"><font size="2"><b>SELECT A SERVER</a></li>
                <li><a href="index.html#testimonials"><font size="2"><b>TESTIMONIALS</a></li>
             </ul>
         </li>
         <li class="special"><a href="#"><font size="4" class="special"><b>HOSTING</b></a>
             <ul>
                <li><a href="games.html"><font size="2"><b>GAME SERVERS</b></a></li>
                <li><a href="shared.html"><font size="2"><b>WEBSITE HOSTING</b></a></li>
                <li><a href="servers.html"><font size="2"><b>DEDICATED SERVERS</b></a></li>
             </ul>
         </li>

        <li><a href="support.html"><font size="4" class="special"><b>SUPPORT</b></a>

         </li>


         <li class="current-menu-item"><a href="login.html"><font size="4" class="special"><b>LOGIN</b></a></li>
                   <li><a href="contact.html"><font size="4"class="special"><b>CONTACT</b></a>

          </li>
    </ul>
  </nav>
<!--  END OF NAVIGATION MENU AREA -->

<!--  MOBILE MENU AREA -->
  <nav class="mobile-menu">
    <ul>
  <li><a href="index.html">HOME</a></li>
         <li><a href="#">HOSTING</a>
             <ul>
                <li><a href="shared.html">SHARED HOSTING</a></li>
                <li><a href="vps.html">CLOUD VPS</a></li>
                <li><a href="servers.html">DEDICATED SERVERS</a></li>
             </ul>
         </li>
         <li><a href="domains.html">DOMAINS</a></li>
         <li><a href="#">PAGES</a>
             <ul>
                <li><a href="support.html">SUPPORT</a></li>
                <li><a href="login.html">LOGIN</a></li>
                <li><a href="testimonials.html">TESTIMONIALS</a></li>
                <li><a href="typography.html">TYPOGRAPHY</a></li>
             </ul>
          </li>
          <li><a href="#">BLOG</a>
              <ul>
                 <li><a href="blog.html">CATEGORY</a></li>
                 <li><a href="blog-single.html">SINGLE POST</a></li>
              </ul>
          </li>
          <li><a href="contact.html">CONTACT</a></li>
</ul>
  </nav>
  <!--  END OF MOBILE MENU AREA -->


  </div>
  </div>
  </div>

</header>
<!--  END OF HEADER -->

<!-- LOGIN FORM -->

<div class="login-container" div id="particles">
<div class="row">
<div class="small-12 large-7 large-centered medium-7 medium-centered columns">

<div class="login-form">
<form method="post">
Email Address: <input type="text" name="username" size="50" />
Password: <input type="password" name="password" size="20" />
<input type="submit" value="Login" />
</form>
</div>

</div>
</div>
</div>
</div>



<!--  FOOTER  -->
<footer>
<div class="row">
<div class="small-12 columns">
<div class="contacts">
<div class="row">
<div class="small-12 large-3 medium-3 columns">
<i class="fa fa-map-marker"></i>
PORTLAND, OR, USA
</div>
<div class="small-12 large-3 medium-3 columns">
<i class="fa fa-mobile"></i>
+1 299-670-9615
</div>
<div class="small-12 large-3 medium-3 columns">
<a href=""><i class="fa fa-comments"></i></a>
LIVE CHAT
</div>
<div class="small-12 large-3 medium-3 columns">
<a href=""><i class="fa fa-envelope-o"></i></a>
E-MAIL US
</div>
</div>
</div>
</div>
</div>


<div class="row">
<div class="small-12 columns">
<div class="footerlinks">
<div class="small-12 large-3 medium-3 columns border-right">
<h2>Hosting Services</h2>
<ul>
<li><a href="shared.html">Shared Hosting</a></li>
<li><a href="vps.html">Managed VPS</a></li>
<li><a href="servers.html">Dedicated Services</a></li>
<li><a href="">Become a Reseller</a></li>
<li><a href="">Special Offers</a></li>
</ul>
</div>

<div class="small-12 large-3 medium-3 columns border-right">
<h2>Company</h2>
<ul>
<li><a href="">About us</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Terms of Service</a></li>
<li><a href="">Acceptable Use Policy</a></li>
<li><a href="">Affiliates</a></li>
</ul>
</div>

<div class="small-12 large-3 medium-3 columns border-right">
<h2>Add-on Services</h2>
<ul>
<li><a href="">SSL Certificates</a></li>
<li><a href="">Dedicated IPs</a></li>
<li><a href="">Control Panel Licenses</a></li>
<li><a href="">WHMCS License</a></li>
<li><a href="">Migrations / Transfers</a></li>
</ul>
</div>

<div class="small-12 large-3 medium-3 columns">
<h2>CloudMe Newsletter</h2>
<p>Sign up for special offers:</p>

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//audemedia.us7.list-manage.com/subscribe/post?u=b5638e105dac814ad84960d90&amp;id=9345afa0aa" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

  <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;"><input type="text" name="b_b5638e105dac814ad84960d90_9345afa0aa" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
</div>
<!--End mc_embed_signup-->
</div>

</div>
</div>

<!--SOCIAL LINKS -->
<div class="social">
<div class="row">
<div class="small-12 columns">
<ul class="small-block-grid-1 large-block-grid-5 medium-block-grid-5">
<li class="facebook"><a href="">FACEBOOK</a></li>
<li class="twitter"><a href="">TWITTER</a></li>
<li class="googleplus"><a href="">GOOGLE+</a></li>
<li class="linkedin"><a href="">LINKEDIN</a></li>
<li class="pinterest"><a href="">PINTEREST</a></li>
</ul>
</div>
</div>
</div>
<!-- END OF SOCIAL LINKS -->
<p class="copyright">© Copyright CloudMe, all rights reserved. </p>
</footer>
<!--  END OF FOOTER  -->

<a href="#top" id="back-to-top"><i class="fa fa-angle-up"></i></a>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/vendor/hoverIntent.js"></script>
    <script src="js/vendor/superfish.min.js"></script>
    <script src="js/vendor/morphext.min.js"></script>
    <script src="js/vendor/wow.min.js"></script>
    <script src="js/vendor/jquery.slicknav.min.js"></script>
    <script src="js/vendor/waypoints.min.js"></script>
    <script src="js/vendor/jquery.animateNumber.min.js"></script>
    <script src="js/vendor/owl.carousel.min.js"></script>
    <script src="js/vendor/jquery.slicknav.min.js"></script>
    <script src="js/vendor/masonry.pkgd.min.js"></script>
    <script src="js/custom.js"></script>

<script>
var container = document.querySelector('.testimonialsContainer');
var msnry = new Masonry( container, {
  // options
  itemSelector: '.testimonial-item'
});
</script>

  </body>
</html>

这是我当前的代码，正如你所看到的，我给了一个div为“粒子”的id以触发粒子效果，它起作用...... 的种类。我的网页现在已经转移了很多，比如这个

正如您所看到的，粒子效应已经将所有内容都推到了页面上。我已经工作了几个小时试图解决这个问题，并感谢任何人提供的任何帮助。谢谢，詹姆斯。

Javascript粒子动画背景

0 个答案: