gsap实现多彩线条织成网状动画效果代码-html代码-BFW代码库

gsap实现多彩线条织成网状动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现多彩线条织成网状动画效果代码画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
<style>
.container {
	translate: -15% 0%;
}
.line {
	height: 2px;
	width: 0;
	margin: 0.35vmin;
	rotate: calc(var(--i) * 90deg);
	background: linear-gradient(45deg, blue, yellow, darkred, #ffff66);
	background-clip: border;
	-webkit-background-clip: border;
	-webkit-text-fill-color: #0000;
	text-fill-color: #0000;
	translate: 30% -25%;
	transform-origin: 50% 50%;
	scale: 0 0;
	animation: scale 3.5s ease-in-out forwards 0.5s;
}
@keyframes scale {
	100% {
		scale: 1 1;
	}
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	min-height: 100vh;
	display: grid;
	place-items: center;
	background: #161616;
}
body > * {
	grid-area: 1/1;
}
</style>

  
  
  
</head>

<body translate="no">
  <div class="container">
	<div class="line" style="--i: 1;"></div>
	<div class="line" style="--i: 2;"></div>
	<div class="line" style="--i: 3;"></div>
	<div class="line" style="--i: 4;"></div>
	<div class="line" style="--i: 5;"></div>
	<div class="line" style="--i: 6;"></div>
	<div class="line" style="--i: 7;"></div>
	<div class="line" style="--i: 8;"></div>
	<div class="line" style="--i: 9;"></div>
	<div class="line" style="--i: 10;"></div>
	<div class="line" style="--i: 11;"></div>
	<div class="line" style="--i: 12;"></div>
	<div class="line" style="--i: 13;"></div>
	<div class="line" style="--i: 14;"></div>
	<div class="line" style="--i: 15;"></div>
	<div class="line" style="--i: 16;"></div>
	<div class="line" style="--i: 17;"></div>
	<div class="line" style="--i: 18;"></div>

	<div class="line" style="--i: 19;"></div>
	<div class="line" style="--i: 20;"></div>
	<div class="line&quo.........完整代码请登录后点击上方下载按钮下载查看