gsap实现dna螺旋动画效果代码-html代码-BFW代码库

gsap实现dna螺旋动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现dna螺旋动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        html, body {
          width:100%;
          height:100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background:#111;
          overflow:hidden;
        }
        
        svg {
          width:80%;
          height:80%;
          max-width:400px;
          max-height:400px;  
        }
    </style>



</head>

<body>
    <svg viewBox="0 0 400 400" fill="#fff" stroke-width="3.5" stroke-linecap="round">
  <mask id="helix"></mask>
  <image mask="url(#helix)" href="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?auto=format&fit=crop&w=640&q=80"/>
</svg>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
    <script>
        createShapes(20);
        
        function createShapes(n) {
        	for (var i = 0; i < n; i++) {
            var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
            var c1 = document.createElementNS("http://www.w3.org/2000/svg", "circle&q.........完整代码请登录后点击上方下载按钮下载查看