splitting实现旋转圆锥梯度动画效果代码-html代码-BFW代码库

splitting实现旋转圆锥梯度动画效果代码

代码语言：html

所属分类：动画

代码描述：splitting实现旋转圆锥梯度动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        html {
          display: grid;
          place-items: center;
          height: 100%;
          font-size: 11vmin;
          background: #271166;
        }
        
        .cell {
          display: block;
          width: 1em;
          height: 1em;
          --r: 1deg;
          --c1: #20f6f0;
          --c2: #086adc;
          background: conic-gradient(from var(--r), var(--c1), var(--c2));
          animation: spin-bg 8s cubic-bezier(0.82, 0.16, 0.22, 0.8) infinite;
        }
        @keyframes spin-bg {
          100% {
            --r: 361deg;
          }
        }
        
        @property --r {
          syntax: "<angle>";
          inherits: false;
          initial-value: 0deg;
        }
        .cell-grid {
          display: grid;
          grid-template: repeat(var(--row-total), 1fr)/repeat(var(--col-total), 1fr);
          gap: 0.2rem;
        }
        
        .cell {
        .........完整代码请登录后点击上方下载按钮下载查看