gsap实现一个环形跟随首页效果代码
代码语言：html
所属分类：布局界面
代码描述：gsap实现一个环形跟随首页效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html, body {
width:100%;
height:100%;
overflow:hidden;
background:#000;
}
</style>
</head>
<body >
<svg class="main1" width="100%" height="100%">
<defs>
<linearGradient id="grad1" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="10%" style="stop-color:rgb(255,255,0);stop-opacity:0.9" />
<stop offset="99%" style="stop-color:rgb(0,255,0);stop-opacity:0.1" />
</linearGradient>
<linearGradient id="grad2" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="25%" style="stop-color:rgb(0,255,200);stop-opacity:0.1" />
<stop offset="99%" style="stop-color:rgb(200,255,0);stop-opacity:0.2" />
</linearGradient>
</defs>
<rect class="m1Bg" fill="url(#grad2)" width="100%" height="100%" />
<g class="m1_stage">
<g class="m1_cGroup">
<circle class="m1OrbBlank" cx="0" cy="50" r="50" fill="#1290ff" />
<circle class="c1_line c1_line4" cx="0" cy="50" r="550" fill="none" stroke-width="2" stroke="url(#grad1)" opacity="0.4" />
<g class="m1Orb orb4b">
<image xlink:href="https://assets.codepen.io/721952/logoVue.png" width="40" height="40" />
</g>
<g class="m1Orb orb4">
<circle cx="15" cy="10.5" r="20" fill="#006bca" />
<path fill="#fff" opacity="0.75" d="M5.29,14.59l-0.01-0.89v-2.32c0.23-0.05,0.53-0.07,0.9-0.07c0.36,0,0.66,0.02,0.9,0.07v8.17
c-0.24,0.05-0.54,0.07-0.9,0.07s-0.65-0.02-0.9-0.07v-2.57l0.01-0.89l-0.6,0.01H3.25l-0.6-0.01l0.01,0.89v2.57
c-0.23,0.05-0.54,0.07-0.9,0.07c-0.37,0-0.66-0.02-0.89-0.07v-8.17c0.23-0.05,0.52-0.07,0.89-0.07c0.37,0,0.67,0.02,0.9,0.07v2.32
l-0.01,0.89l0.6-0.01h1.44L5.29,14.59z M11.74,12.89l0.01,0.89v5.78c-0.24,0.05-0.54,0.07-0.9,0.07c-0.36,0-0.65-0.02-0.9-0.07
v-5.78l0.01-0.89H9.96L9.23,12.9H7.99c-0.04-0.23-0.06-0.48-0.06-0.76c0-0.28,0.02-0.53,0.06-0.76h5.75
c0.06,0.21,0.09,0.45,0.09,0.73c0,0.28-0.07,0.48-0.22,0.6c-0.15,0.12-0.39,0.19-0.72,0.19h-0.41l-0.73-0.01H11.74z M14.19,19.53
l0.62-8.14c0.3-0.06,0.69-0.08,1.18-0.08c0.49,0,0.88,0.03,1.17,0.08l0.75,3.04c0.21,0.89,0.36,1.6,0.45,2.14h0.07
c0.09-0.54,0.23-1.26,0.45-2.14l0.75-3.04c0.3-0.06,0.69-0.08,1.17-0.08c0.48,0,0.87,0.03,1.16,0.08l0.62,8.14
c-0.22,0.06-0.5,0.1-0.84,0.1s-0.63-0.02-0.84-0.06L20.7,16.1c-0.06-1.1-0.09-2.01-0.09-2.72h-0.08l-1.22,4.97
c-0.21,0.04-0.51,0.06-0.91,0.06c-0.39,0-0.71-0.02-0.93-0.06l-1.21-4.97h-0.08c-0.02,0.97-0.05,1.88-0.09,2.72l-0.19,3.47
c-0.22,0.04-0.5,0.06-0.84,0.06C14.7,19.63,14.42,19.6,14.19,19.53z M26.92,18.01H29c0,0.26-0.02,0.49-0.05,0.68
c-0.09,0.6-0.48,0.9-1.17,0.9h-2.7c-0.32,0-0.57-0.1-0.76-0.29c-0.19-0.19-0.28-0.45-0.28-0.79v-7.13l0.08-0.07h0.66
c0.7,0,1.06,0.38,1.06,1.15v5.59C26.23,18.03,26.59,18.01,26.92,18.01z M5.59,3.67c0-0.04,0-0.08,0-0.13c0-0.53-0.11-0.98-0.32-1.36
C5.05,1.82,4.67,1.63,4.13,1.63S3.19,1.89,2.94,2.39C2.69,2.9,2.56,3.63,2.56,4.59c0,0.96,0.16,1.67,0.47,2.15
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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