gsap实现三维三角形loading加载效果代码

代码语言:html

所属分类:加载滚动

代码描述:gsap实现三维三角形loading加载效果代码

代码标签: 三角形 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&quo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0