TweenMax+svg实现光子穿过多层透镜动画效果代码
代码语言：html
所属分类：动画
代码描述：TweenMax+svg实现光子穿过多层透镜动画效果代码
代码标签： TweenMax svg 光子 穿过 多层 透镜 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #000;
overflow: hidden;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
width: 100%;
height: 100%;
visibility: hidden;
}
.desat {
filter:url(#desat)
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<svg viewBox="0 0 1323 427" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<ellipse id="path-1" cx="68" cy="213.5" rx="68" ry="213.5"></ellipse>
<linearGradient x1="46.1911694%" y1="84.9243045%" x2="53.8442177%" y2="16.3295925%" id="linearGradient-3">
<stop stop-color="#1D8DBA" offset="0%"></stop>
<stop stop-color="#03ECAE" offset="100%"></stop>
</linearGradient>
<ellipse id="path-4" cx="52.96875" cy="200.15625" rx="52.96875" ry="200.15625"></ellipse>
<linearGradient x1="46.1911694%" y1="84.9243045%" x2="53.8442177%" y2="16.3295925%" id="linearGradient-6">
<stop stop-color="#1D8DBA" offset="0%"></stop>
<stop stop-color="#03ECAE" offset="100%"></stop>
</linearGradient>
<linearGradient x1="2.52729595%" y1="50.372629%" x2="100.254178%" y2="48.3579187%" id="linearGradient-7">
<stop stop-color="#1D8DBA" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#1C82AC" offset="35.4534198%"></stop>
<stop stop-color="#03ECAE" offset="81.7401613%"></stop>
<stop stop-color="#03ECAE" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-8">
<stop stop-color="#FFFFFF" stop-opacity="0.5" offset="0%"></stop>
<stop stop-color="#000000" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-9">
<stop stop-color="#FFFFFF" stop-opacity="0.5" offset="0%"></stop>
<stop stop-color="#000000" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="12.4534884%" y1="75.0267275%" x2="87.8953488%" y2="25.871814%" id="linearGradient-10">
<stop stop-color="#1D8DBA" offset="0%"></stop>
<stop stop-color="#03ECAE" offset="100%"></stop>
</linearGradient>
<linearGradient x1="-0.00267571531%" y1="50.0000348%" x2="99.9993936%" y2="50.0000348%" id="linearGradient-11">
<stop stop-color="#9FFFF1" offset="0%"></stop>
<stop stop-color="#74FFF1" offset="40%"></stop>
<stop stop-color="#36FFF0" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Managed-Security---AWS-Level-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="funnel">
<g id="Oval" transform="translate(1187.000000, 0.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Mask"></g>
<ellipse stroke="url(#linearGradient-3)" stroke-width="25" mask="url(#mask-2)" cx="55" cy="213.5" rx="68" ry="213.5"></ellipse>
<ellipse id="Oval-Copy-30" stroke="url(#linearGradient-3)" stroke-width="25" opacity="0.184629193" mask="url(#mask-2)" cx="81" cy="213.5" rx="68" ry="213.5"></ellipse>
</g>
<g id="Oval-Copy-21" transform="translate(1164.000000, 13.000000)">
<mask id="mask-5" fill="white">
<use xlink:href="#path-4"></use>
</mask>
<g id="Mask"></g>
<ellipse id="Oval" stroke="url(#linearGradient-6)" stroke-width="23.4375" mask="url(#mask-5)" cx="47.5625" cy="200.15625" rx="63.75" ry="200.15625"></ellipse>
<ellipse id="Oval-Copy-40" stroke="url(#linearGradient-6)" stroke-width="23.4375" opacity="0.183974322" mask="url(#mask-5)" cx="61.5625" cy="200.15625" rx="63.75" ry="200.15625"></ellipse>
</g>
<path d="M1233.5625,45 C1268.77065,45 1297.3125,102.613006 1297.3125,213.15625 C1297.3125,323.699494 1268.77065,364.3125 1233.5625,364.3125 C1231.79187,364.3125 1230.03809,364.209785 1228.30396,364.000625 L100,364 C44.771525,364 6.76353751e-15,319.228475 0,264 L0,146 C-6.76353751e-15,90.771525 44.771525,46 100,46 L1225.65896,45.9965698 C1228.24855,45.3328755 1230.88627,45 1233.5625,45 Z" id="Combined-Shape" fill="url(#linearGradient-7)" opacity="0.164681468"></path>
<path d="M41,46 L1228.66967,46 C1235.0544,46 1240.23025,51.1758469 1240.23025,57.5605777 C1240.23025,61.0235728 1238.67782,64.3041855 1236,66.5 C1219.83453,79.7556866 1199.57507,87 1178.66967,87 L4.54747351e-13,87 L4.54747351e-13,87 C4.51974301e-13,64.3563253 18.3563253,46 41,46 Z" id="Combined-Shape-Copy" fill="url(#linearGradient-8)" opacity="0.164681468"></path>
<path d="M41,322 L1236.66967,322 C1243.0544,322 1248.23025,327.175847 1248.23025,333.560578 C1248.23025,337.023573 1246.67782,340.304185 1244,342.5 C1227.83453,355.755687 1207.57507,363 1186.66967,363 L4.54747351e-13,363 L4.54747351e-13,363 C4.51974301e-13,340.356325 18.3563253,322 41,322 Z" id="Combined-Shape-Copy-2" fill="url(#linearGradient-9)" opacity="0.164681468" transform="translate(624.115126, 342.500000) scale(1, -1) translate(-624.115126, -342.500000) "></path>
<g id="report1" transform="translate(922.000000, 82.000000)" fill-rule="nonzero">
<path d="M0.2925,13.575 L63.2925,226.71 C64.633015,231.246671 68.7994221,234.36 73.53,234.36 L264.435,234.36 C266.674115,234.36 268.777206,233.285165 270.092985,231.473435 C271.408764,229.661705 271.778428,227.32985 271.0875,225.2 L202.19,13.415 C200.768432,9.0473961 196.712988,6.07830393 192.12,6.0425 L7.055,4.59483211 C4.83953133,4.57967649 2.74759434,5.61406881 1.41481522,7.38388124 C0.0820360929,9.15369367 -0.33422912,11.4499713 0.2925,13.575 Z" id="Path" fill="url(#linearGradient-10)"></path>
<path d="M5.015,8.9775 L68,222.1125 C69.3423454,226.653603 73.5146543,229.768588 78.25,229.765003 L269.1525,229.765003 C271.391615,229.765003 273.494706,228.690165 274.810485,226.878435 C276.126264,225.066705 276.495928,222.73485 275.805,220.605 L206.9125,8.82 C205.491143,4.45188549 201.435899,1.4819325 196.8425,1.445 L11.7775,-0.000162807539 C9.56261949,-0.015085815 7.4712781,1.01897513 6.13861702,2.78813814 C4.80595595,4.55730114 4.38923037,6.8528034 5.015,8.9775 Z" id="Path" fill="url(#linearGradient-11)" opacity="0.38"></path>
<g id="Group" transform="translate(27.750000, 19.000000)" fill="#FFFFFF" opacity="0.49">
<path d="M180.98,78.4175 L27.33,78.4175 C23.5483495,78.4175 20.2099677,75.9483534 19.1025,72.3325 L0.4175,11.355 C-0.382548832,8.74486367 0.103041589,5.90995173 1.72617167,3.71488031 C3.34930175,1.51980889 5.91750187,0.225 8.6475,0.225 L162.2975,0.225 C166.08049,0.225 169.419962,2.69526749 170.5275,6.3125 L189.21,67.29 C190.009082,69.89981 189.523025,72.7339445 187.900013,74.9283629 C186.277001,77.1227814 183.709403,78.4175 180.98,78.4175 L180.98,78.4175 Z" id="Path"></path>
<polygon id="Path" points="153.7775 113.3175 33.46 113.3175 27.8 95.1525 148.115 95.1525"></polygon>
<ellipse id="Oval" transform="translate(176.577566, 102.803991) rotate(-6.770000) translate(-176.577566, -102.803991) " cx="176.577566" cy="102.803991" rx="15.39" ry="15.5"></ellipse>
<path d="M200.8025,136.295 L44.375,136.295 C42.576236,136.294207 40.976431,135.151346 40.3925,133.45 L40.3925,133.45 C39.9508928,132.163331 40.1578094,130.7426 40.9480706,129.635342 C41.7383318,128.528083 43.0146567,127.8706 44.375,127.87 L200.8025,127.87 C202.601283,127.87012 204.201775,129.011751 204.7875,130.7125 L204.7875,130.7125 C205.230259,131.999893 205.023551,133.421896 204.23258,134.529949 C203.44161,135.638003 202.163902,136.295485 200.8025,136.295 Z" id="Path"></path>
<path d="M206.53,155.645 L50.1025,155.645 C48.3037168,155.64488 46.7032248,154.503249 46.1175,152.8025 L46.1175,152.8025 C45.6747411,151.515107 45.8814491,150.093104 46.6724196,148.985051 C47.4633901,147.876997 48.7410975,147.219515 50.1025,147.22 L206.53,147.22 C208.328108,147.220426 209.927715,148.362141 210.5125,150.0625 L210.5125,150.0625 C210.955115,151.349476 210.748692,152.771003 209.958306,153.878932 C209.167921,154.986861 207.890961,155.644678 206.53,155.645 L206.53,155.645 Z" id="Path"></path>
<path d="M212.65,175.000001 L56.2225,175.000001 C54.4267576,174.994577 52.831879,173.851364 52.25,172.1525 L52.25,172.1525 C51.8073846,170.865524 52.0138081,169.443997 52.8041936,168.336068 C53.5945791,167.228139 54.8715387,166.570322 56.2325,166.57 L212.65,166.57 C214.448783,166.57012 216.049275,167.711751 216.635,169.4125 L216.635,169.4125 C217.079779,170.700506 216.87406,172.124103 216.08284,173.233499 C215.291619,174.342895 214.01264,175.001043 212.65,175.000001 Z" id="Path"></path>
<path d="M219.75,194.345029 L63.3325,194.345029 C61.5325727,194.346038 59.9310867,193.202694 59.3475,191.5 L59.3475,191.5 C58.9047411,190.212607 59.1114491,188.790604 59.9024196,187.682551 C60.6933901,186.574497 61.9710975,185.917015 63.3325,185.917474 L219.75,185.917474 C221.55585,185.911165 223.164848,187.05657 223.75,188.765 L223.75,188.765 C224.192621,190.054594 223.983715,191.478663 223.189355,192.586795 C222.394995,193.694928 221.113429,194.350066 219.75,194.345029 Z" id="Path"></path>
</g>
</g>
<g id="report2" transform="translate(514.000000, 82.000000)" fill-rule="nonzero">
<path d="M0.2925,13.575 L63.2925,226.71 C64.633015,231.246671 68.7994221,234.36 73.53,234.36 L264.435,234.36 C266.674115,234.36 268.777206,233.285165 270.092985,231.473435 C271.408764,229.661705 271.778428,227.32985 271.0875,225.2 L202.19,13.415 C200.768432,9.0473961 196.712988,6.07830393 192.12,6.0425 L7.055,4.59483211 C4.83953133,4.57967649 2.74759434,5.61406881 1.41481522,7.38388124 C0.0820360929,9.15369367 -0.33422912,11.4499713 0.2925,13.575 Z" id="Path" fill="url(#linearGradient-10)"></path>
<path d="M5.015,8.9775 L68,222.1125 C69.3423454,226.653603 73.5146543,229.768588 78.25,229.765003 L269.1525,229.765003 C271.391615,229.765003 273.494706,228.690165 274.810485,226.878435 C276.126264,225.066705 276.495928,222.73485 275.805,220.605 L206.9125,8.82 C205.491143,4.45188549 201.435899,1.4819325 196.8425,1.445 L11.7775,-0.000162807539 C9.56261949,-0.015085815 7.4712781,1.01897513 6.13861702,2.78813814 C4.80595595,4.55730114 4.38923037,6.8528034 5.015,8.9775 Z" id="Path" fill="url(#linearGradient-11)" opacity="0.38"></path>
<g id="Group" transform="translate(27.750000, 19.000000)" fill="#FFFFFF" opacity="0.49">
<path d="M180.98,78.4175 L27.33,78.4175 C23.5483495,78.4175 20.2099677,75.9483534 19.1025,72.3325 L0.4175,11.355 C-0.382548832,8.74486367 0.103041589,5.90995173 1.72617167,3.71488031 C3.34930175,1.51980889 5.91750187,0.225 8.6475,0.225 L162.2975,0.225 C166.08049,0.225 169.419962,2.69526749 170.5275,6.3125 L189.21,67.29 C190.009082,69.89981 189.523025,72.7339445 187.900013,74.9283629 C186.277001,77.1227814 183.709403,78.4175 180.98,78.4175 L180.98,78.4175 Z" id="Path"></path>
<polygon id="Path" points="153.7775 113.3175 33.46 113.3175 27.8 95.1525 148.115 95.1525"></polygon>
<ellipse id="Oval" transform="translate(176.577566, 102.803991) rotate(-6.770000) translate(-176.577566, -102.803991) " cx="176.577566" cy="102.803991" rx="15.39" ry="15.5"></ellipse>
<path d="M200.8025,136.295 L44.375,136.295 C42.576236,136.294207 40.976431,135.151346 40.3925,133.45 L40.3925,133.45 C39.9508928,132.163331 40.1578094,130.7426 40.9480706,129.635342 C41.7383318,128.528083 43.0146567,127.8706 44.375,127.87 L200.8025,127.87 C202.601283,127.87012 204.201775,129.011751 204.7875,130.7125 L204.7875,130.7125 C205.230259,131.999893 205.023551,133.421896 204.23258,134.529949 C203.44161,135.638003 202.163902,136.295485 200.8025,136.295 Z" id="Path"></path>
<path d="M206.53,155.645 L50.1025,155.645 C48.3037168,155.64488 46.7032248,154.503249 46.1175,152.8025 L46.1175,152.8025 C45.6747411,151.515107 45.8814491,150.093104 46.6724196,148.985051 C47.4633901,147.876997 48.7410975,147.219515 50.1025,147.22 L206.53,147.22 C208.328108,147.220426 209.927715,148.362141 210.5125,150.0625 L210.5125,150.0625 C210.955115,151.349476 210.748692,152.771003 209.958306,153.878932 C209.167921,154.986861 207.890961,155.644678 206.53,155.645 L206.53,155.645 Z" id="Path"></path>
<path d="M212.65,175.000001 L56.2225,175.000001 C54.4267576,174.994577 52.831879,173.851364 52.25,172.1525 L52.25,172.1525 C51.8073846,170.865524 52.0138081,169.443997 52.8041936,168.336068 C53.5945791,167.228139 54.8715387,166.570322 56.2325,166.57 L212.65,166.57 C214.448783,166.57012 216.049275,167.711751 216.635,169.4125 L216.635,169.4125 C217.079779,170.700506 216.87406,172.124103 216.08284,173.233499 C215.291619,174.342895 214.01264,175.001043 212.65,175.000001 Z" id="Path"></path>
<path d="M219.75,194.345029 L63.3325,194.345029 C61.5325727,194.346038 59.9310867,193.202694 59.3475,191.5 L59.3475,191.5 C58.9047411,190.212607 59.1114491,188.790604 59.9024196,187.682551 C60.6933901,186.574497 61.9710975,185.917015 63.3325,185.917474 L219.75,185.917474 C221.55585,185.911165 223.164848,187.05657 223.75,188.765 L223.75,188.765 C224.192621,190.054594 223.983715,191.478663 223.189355,192.586795 C222.394995,193.694928 221.113429,194.350066 219.75,194.345029 Z" id="Path"></path>
</g>
</g>
<g id="report3" transform="translate(106.000000, 82.000000)" fill-rule="nonzero">
<path d="M0.2925,13.575 L63.2925,226.71 C64.633015,231.246671 68.7994221,234.36 73.53,234.36 L264.435,234.36 C266.674115,234.36 268.777206,233.285165 270.092985,231.473435 C271.408764,229.661705 271.778428,227.32985 271.0875,225.2 L202.19,13.415 C200.768432,9.0473961 196.712988,6.07830393 192.12,6.0425 L7.055,4.59483211 C4.83953133,4.57967649 2.74759434,5.61406881 1.41481522,7.38388124 C0.0820360929,9.15369367 -0.33422912,11.4499713 0.2925,13.575 Z" id="Path" fill="url(#linearGradient-10)"></path>
<path d="M5.015,8.9775 L68,222.1125 C69.3423454,226.653603 73.5146543,229.768588 78.25,229.765003 L269.1525,229.765003 C271.391615,229.765003 273.494706,228.690165 274.810485,226.878435 C276.126264,225.066705 276.495928,222.73485 275.805,220.605 L206.9125,8.82 C205.491143,4.45188549 201.435899,1.4819325 196.8425,1.445 L11.7775,-0.000162807539 C9.56261949,-0.015085815 7.4712781,1.01897.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0