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

代码语言:html

所属分类:背景

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

代码标签: 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