纯css实现动态渐变背景效果代码-html代码-BFW代码库

纯css实现动态渐变背景效果代码

代码语言：html

所属分类：背景

代码描述：纯css实现动态渐变背景效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
@property --x0 {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}
@keyframes x0 {
  0% {
    --x0: 25% ;
  }
  100% {
    --x0: 75% ;
  }
}
@property --y0 {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}
@keyframes y0 {
  0% {
    --y0: 25% ;
  }
  100% {
    --y0: 75% ;
  }
}
@property --x1 {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}
@keyframes x1 {
  0% {
    --x1: 25% ;
  }
  100% {
    --x1: 75% ;
  }
}
@property --y1 {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}
@keyframes y1 {
  0% {
    --y1: 25% ;
  }
  100% {
    --y1: 75% ;
  }
}
@property --x2 {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}
@keyframes x2 {
  0% {
    --x2: 25% ;
  }
  100% {
    --x2: 75% ;
  }
}
@property --y2 {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}
@keyframes y2 {
  0% {
    --y2: 25% ;
  }
  100% {
    --y2: 75% ;
  }
}
@property --x3 {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}
@keyframes x3 {
  0% {
    --x3: 25% ;
  }
  100% {
    --x3: 75% ;
  }
}
@property --y3 {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}
@keyframes y3 {
  0% {
    --y3: 25% ;
  }
  100% {
    --y3: 75% ;
  }
}
@property --x4 {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: fals.........完整代码请登录后点击上方下载按钮下载查看