javascript - 如何在Wordpress主页中实现一个js动画

标签 javascript html css wordpress

我想实现这段代码https://codepen.io/giulianomlodi/pen/GaNOQp进入我的 wordpress 网站。现在,当我在同一文件夹中创建单独的 css 和 js 文件并将它们链接到 html 页面以显示它时,我什至不能让它出现。


<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" type="text/css" href="./particle.css">

</head>

<!-- particles.js container --> 
<body>



    <!-- particles.js lib - https://github.com/VincentGarreau/particles.js --> 
    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script src="./particle.js"> </script>





</body>


当我尝试在浏览器上可视化 html 页面时,没有任何显示。

我不明白如何让它发挥作用。最终目的是显示在我的网站首页https://www.babbasons.com/而不是实际的视频动画。

有没有人可以帮助我?

最佳答案

您需要为 particle.js 添加 div 标签以了解在何处呈现元素。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="./particle.css">
</head>

<!-- particles.js container --> 
<body>
    <div id="particles-js"></div>
    <!-- particles.js lib - https://github.com/VincentGarreau/particles.js --> 
    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script src="./particle.js"> </script>
</body>



关于javascript - 如何在Wordpress主页中实现一个js动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56127614/

相关文章:

javascript - requestAnimationFrame计算耗时

javascript - polymer - 结束绑定(bind)事件时 dom-repeat?

html - 外部 CSS 编码问题?

javascript - 工具提示不在底部

html - css/html - 在父 div 中传播子 div

CSS 类(求助!)

JavaScript fadeIn 自定义时间

html - 如何避免输入类型数字中的十进制值

javascript - 使用 JavaScript 切换联系表单字段

javascript - 为什么 VS Code 在处理来自 Promise 中的 Reject 的异常时会中断?