css布局实现一个彩色线条图形动画效果代码-html代码-BFW代码库

css布局实现一个彩色线条图形动画效果代码

代码语言：html

所属分类：动画

代码描述：使用css代码布局实现一个彩色线条汇聚中心形成一个图形的动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @charset "UTF-8";
        @property --a {
          syntax: "<angle>";
          initial-value: 0deg;
          inherits: false;
        }
        body, div {
          display: grid;
        }
        
        body {
          overflow: hidden;
          margin: 0;
          height: 100vh;
          background: #000;
        }
        
        div {
          grid-area: 1/1;
        }
        
        .🐍 {
          place-self: center;
          transform: rotate(calc(var(--i)/var(--n)*1turn)) translate(40%);
          mix-blend-mode: screen;
        }
        
        .🌈 {
          background: conic-gradient(#a65af2, #5aa6f2, #5af2a6, #a6f25a, #f2a65a, #f25aa6, #a65af2);
          clip-path: circle(calc(50% - 18px));
        }
        
        @keyframes a {
          to {
            --a: 1turn ;
          }
        }
        .⬡ {
          padding: 2.25em;
          background: #000;
          filter: blur(9px) contrast(27);
          mix-blend-mode: darken;
        }
        .⬡::after {
          padding: 9em;
          transform: scalex(-1) rotate(var(--a));
          background: #fff;
          clip-path: polygon(100% 50%, 75% 93.3012701892%, 25% 93.3012701892%, 0% 50%, 25% 6.6987298108%, 75% 6.6987298108%, 100% 50%, calc(50% + (50% - 1em)*1) calc(50% - (50% - 1em)*0), calc(50% + (50% - 1em)*0.5) calc(50% - (50% - 1em)*0.8660254038), calc(50% + (50% - 1em)*-0.5) calc(50% - (50% - 1em)*0.8660254038), calc(50% + (50% - 1em)*-1) calc(50% - (50% - 1em)*0), calc(50% + (50% - 1em)*-0.5) calc(50% - (50% - 1em)*-0.8660254038), calc(50% + (50% - 1em)*0.5) calc(50% - (50% - 1em)*-0.8660254038), calc(50% + (50% - 1em)*1) calc(50% - (50% - 1em)*0));
          --mask:
          	conic-gradient(from calc(-6*var(--a)),
          			red, 95%, transparent);
          -webkit-mask: var(--mask);
          mask: var(--mask);
          animation: a 18s linear infinite;
          content: "";
        }
    </style>


</head>


<body style="--n: 12">
    <div class="🐍" style="--i: 11">
        .........完整代码请登录后点击上方下载按钮下载查看