css实现方块搭建的正方形变形旋转艺术动画效果代码-html代码-BFW代码库

css实现方块搭建的正方形变形旋转艺术动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现方块搭建的正方形变形旋转艺术动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          display: grid;
          overflow: hidden;
          margin: 0;
          height: 100vh;
          background: #303841;
        }
        
        .line {
          --r-ini: calc(0.9375em + var(--i)*0.75em);
          --r-fin: calc(0.9375em + (var(--n-lines) - 1 - var(--i))*0.75em);
          --h-max: calc(2*var(--tan)*(0.9375em + (var(--n-lines) - 1)*0.75em));
          --s-ini: calc((var(--n-lines) - 1 - var(--i))*0.75em);
          --s-fin: calc(var(--i)*0.75em);
          --x0: calc(var(--i)/var(--n-lines));
          --x1: calc(1 - var(--x0));
          grid-area: 1/1;
          place-self: center;
          width: 0.375em;
          height: var(--h-max);
          transform: rotate(calc(var(--k)*1turn/var(--n-sides))) translate(calc(var(--r-ini) - 0.1875em));
          clip-path: inset(var(--s-ini) 0 round 0.1875em);
          mix-blend-mode: overlay;
          animation: slide 4s infinite;
          animation-name: slide, morph;
          animation-timing-function: cubic-bezier(var(--x0), 0, var(--x0), 1), cubic-bezier(calc(1 - var(--x0)), 0, calc(1 - .2*var(--x0)), 1);
        }
        
        @keyframes slide {
          80%, 100% {
            transform: rotate(calc(var(--k)*1turn/var(--n-sides))) translate(calc(var(--r-fin) - 0.1875em)) rotate(0.5turn);
          }
        }
        @keyframes morph {
          80%, 100% {
            clip-path: inset(var(--s-fin) 0 round 0.1875em);
          }
        }
    </style>




</head>


<body style="--n-sides: 4; --n-lines: 11; --tan: 1">
    <style>
        .line:nth-of-type(11n + 1),.line:nth-last-of-type(11n + 1) { background: #299ea5 }.line:nth-of-type(11n + 2),.line:nth-last-of-type(11n + 2) { background: #6fb1b6 }.line:nth-of-type(11n + 3),.line:nth-last-of-type(11n + 3) { background: #b4c4c7 }.line:nth-of-type(11n + 4),.line:nth-last-of-type(11n + 4) { background: #cba9a0 }.line:nth-of-type(11n + 5),.line:nth-last-of-type(11n + 5) { background: #d37e64 }.line:nth-of-type(11n + 6) { background: #d55128 }.line:nth-of-type(n + 1) { --k: 0 }.line:nth-of-type(n + 12) { --k: 1 }.line:nth-of-type(n + 23) { --k: 2 }.line:nth-of-type(n + 34) { --k: 3 }.line:nth-of-type(11n + 1) { --i: 0 }.line:nth-of-type(11n + 2) { --i: 1 }.line:nth-of-type(11n + 3) { --i: 2 }.line:nth-of-type(11n + 4) { --i: 3 }.line:nth-of-type(11n + 5) {.........完整代码请登录后点击上方下载按钮下载查看