gsap实现三维三角形loading加载效果代码
代码语言：html
所属分类：加载滚动
代码描述：gsap实现三维三角形loading加载效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #170523;
}
svg {
display: block;
max-width: 100%;
margin: auto;
}
</style>
</head>
<body >
<svg width="502" height="480" viewBox="0 0 502 480" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.257568359375 0 0 0.225189208984375 251 224.45)" id="penrose-grad-0">
<stop offset="0.29411764705882354" stop-color="#3ef5f0"/>
<stop offset="0.7490196078431373" stop-color="#e248a0"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.2105712890625 0 0 0.203826904296875 212.5 206.95)" id="penrose-grad-1">
<stop offset="0" stop-color="#3ff6f0"/>
<stop offset="1" stop-color="#39b9f6"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(-0.0947723388671875 -0.1638336181640625 0.17742919921875 -0.102630615234375 212.1 341.8)" id="penrose-grad-2">
<stop offset="0" stop-color="#543864"/>
<stop offset="1" stop-color="#2f1f38"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.220855712890625 0 0 0.22412109375 281.05 225.35)" id="penrose-grad-3">
<stop offset="0" stop-color="#f450aa"/>
<stop offset="1" stop-color="#a32f80"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.069305419921875 0.1433563232421875 -0.05828857421875 0.0281829833984375 352.9 225.2)" id="penrose-grad-4">
<stop offset="0" stop-color="#aee9f9"/>
<stop offset="1" stop-color="#fcc8a0"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.156219482421875 0.008209228515625 -0.0032806396484375 0.0624542236328125 245.3 388.45)" id="penrose-grad-5">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="1" stop-color="#fcc8a0"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.0882568359375 -0.1304473876953125 0.0532379150390625 0.0360107421875 158.45 210.45)" id="penrose-grad-6">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="1" stop-color="#aee9f9"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.0047760009765625 -0.0177764892578125 0.0206298828125 0.0055084228515625 359.5 353.8)" id="penrose-grad-7">
<stop offset="0" stop-color="#3ac3f4" stop-opacity="0"/>
<stop offset="1" stop-color="#144258" stop-opacity="0.5"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(-0.0160675048828125 0.0042572021484375 -0.0052337646484375 -0.019744873046875 259.35 127.75)" id="penrose-grad-8">
<stop offset="0" stop-color="#543864" stop-opacity="0"/>
<stop offset="1" stop-color="#23172a" stop-opacity="0.5"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.0113525390625 0.011383056640625 -0.0138397216796875 0.0137786865234375 124.2 329.35)" id="penrose-grad-9">
<stop offset="0" stop-color="#f450aa" stop-opacity="0"/>
<stop offset="1" stop-color="#2c0c22" stop-opacity="0.25"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(-0.0947723388671875 -0.1638336181640625 0.17742919921875 -0.102630615234375 212.1 341.8)" id="penrose-grad-2">
<stop offset="0" stop-color="#543864"/>
<stop offset="1" stop-color="#2f1f38"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.220855712890625 0 0 0.22412109375 281.05 225.35)" id="penrose-grad-3">
<stop offset="0" stop-color="#f450.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
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