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" sty.........完整代码请登录后点击上方下载按钮下载查看