three实现三维多色dna序列动画背景效果代码-html代码-BFW代码库

three实现三维多色dna序列动画背景效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维多色dna序列动画背景效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">


    <style>
        html, body, canvas {
          margin: 0;
          width: 100%;
          height: 100%;
          display: block;
          position: absolute;
          top: 0;
          left: 0;
        }
    </style>
</head>

<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.js"></script>

    <div></div>

    <script>
        function addNote(shade) {
          var style = "#gm-signature{font-family:Helvetica,Arial,sans-serif;display:block;position:fixed;z-index:99999;bottom:2rem;right:1rem;line-height:50px;border-radius:2px;color:#444;text-transform:uppercase;font-weight:700;font-size:10px;-webkit-animation:gm-signature-in 500ms cubic-bezier(0,1.2,1,1);animation:gm-signature-in 500ms cubic-bezier(0,1.2,1,1);opacity:.6}#gm-signature strong{position:absolute;right:50%;width:200px;text-align:right;padding-right:8px;opacity:0;-webkit-transition:right 200ms,opacity 200ms;transition:right 200ms,opacity 200ms;z-index:-1;pointer-events:none}#gm-signature:hover{opacity:1}#gm-signature:hover strong{opacity:1;right:100%}#gm-signature .fill-1{fill:#fff}#gm-signature .fill-2,#gm-signature.gm-signature-light .fill-1{fill:#000}#gm-signature.gm-signature-light strong{color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.1)}#gm-signature.gm-signature-light .fill-2{fill:#fff}#gm-signature a{text-decoration:none;color:#444!important;height:20px;display:block;padding:4px}#gm-signature img{border-radius:50%}#gm-signature img,#gm-signature svg{vertical-align:middle}#gm-signature .codepen-logo,#gm-signature img{width:50px;height:50px}#gm-signature @-webkit-keyframes gm-signature-in{from{-webkit-transform:translateX(2rem);transform:translateX(2rem);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:.6}}@keyframes gm-signature-in{from{-webkit-transform:translateX(2rem);transform:translateX(2rem);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:.6}}";
        
        var signature = ""
        var _container, _signature, _style;
          if (!shade) {
            shade = "light"
          }
          if (shade == "dark") {
            shade = ""
          } else {
            shade = "light"
          }
          _style = document.createElement("style");
          _style.innerHTML = style;
          _signature = document.createElement("div");
          _signature.setAttribute("id", "gm-signature");
          _signature.className = "gm-signature-" + shade;
          _signature.innerHTML = signature;
          _container = document.createElement("div");
          _container.appendChild(_signature);
          document.body.appendChild(_style);
          document.body.appendChild(.........完整代码请登录后点击上方下载按钮下载查看