纯css实现正方形与八角形相互变换动画背景效果代码-html代码-BFW代码库

纯css实现正方形与八角形相互变换动画背景效果代码

代码语言：html

所属分类：背景

代码描述：纯css实现正方形与八角形相互变换动画背景效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @property --a{
          syntax: '<angle>';
          inherits: true;
          initial-value: 0deg;
        }
        @property --p {
          syntax: '<percentage>';
          inherits: true;
          initial-value: 0%;
        }
        @property --c1 {
          syntax: '<color>';
          inherits: true;
          initial-value: #000;
        }
        @property --c2 {
          syntax: '<color>';
          inherits: true;
          initial-value: #000;
        }
        
        html {
          --s: 80px;
          --_g: #0000, var(--c1) 2deg calc(var(--a) - 2deg),#0000 var(--a);
          background: 
            conic-gradient(from calc(-45deg  - var(--a)/2) at top    var(--p) left  var(--p),var(--_g)),
            conic-gradient(from calc(-45deg  - var(--a)/2) at top    var(--p) left  var(--p),var(--_g)),
            conic-gradient(from calc( 45deg  - var(--a)/2) at top    var(--p) right var(--p),var(--_g)),
            conic-gradient(from calc( 45deg  - var(--a)/2) at top    var(--p) right var(--p),var(--_g)),
            conic-gradient(from calc(-135deg - var(--a)/2) at bottom var(--p) left  var(--p),var(--_g)),.........完整代码请登录后点击上方下载按钮下载查看