tsparticles实现交互聚光灯照射正方形圆形物体阴影效果代码-html代码-BFW代码库

tsparticles实现交互聚光灯照射正方形圆形物体阴影效果代码

代码语言：html

所属分类：动画

代码描述：tsparticles实现交互聚光灯照射正方形圆形物体阴影效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        /* ---- reset ---- */
        body {
          margin: 0;
          font: normal 75% Arial, Helvetica, sans-serif;
        }
        canvas {
          display: block;
          vertical-align: bottom;
        }
        /* ---- tsparticles container ---- */
        #tsparticles {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: #0d47a1;
          background-image: url("");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: 50% 50%;
        }
        
        .github {
          bottom: 10px;
          right: 10px;
          position: fixed;
          border-radius: 10px;
          background: #fff;
          padding: 0 12px 6px 12px;
          border: 1px solid #000;
        }
        
        .github a:hover,
        .github a:link,
        .github a:visited,
        .github a:active {
          color: #000;
          text-decoration: none;
        }
        
        .github img {
          height: 30px;
        }
        
        .github #gh-project {
          font-size: 20px;
          padding-left: 5px;
          font-weight: bold;
          vertical-align: bottom;
        }
    </style>



</head>

<body>
    <!-- tsParticles container -->
    <div id="tsparticles"></div>



    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tsparticles.1.32.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tsparticles.interaction.light.min.js"></script>
    <script>
        // external npm package: tsparticles-interaction-light
        loadLightInteraction(tsParticles);
       .........完整代码请登录后点击上方下载按钮下载查看