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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0