纯css实现拼图背景效果代码-html代码-BFW代码库

纯css实现拼图背景效果代码

代码语言：html

所属分类：背景

代码描述：纯css实现拼图背景效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
html {
	--sz: 24px;
	--c1: #673AB7;
	--c2: #4b2889;
	--c3: #401c81;
	--c4: #2d125d;
	/*
	--c1: #1d6cd3;
	--c2: #00bb1c;
	--c3: #e11a3b;
	--c4: #ff9800;
	*/
	
	--ts: 50% / calc(var(--sz) * 10) calc(var(--sz) * 20);
	--bp: calc(var(--sz) * -5) calc(var(--sz) * -10);
	--pz: calc(var(--sz) * 0.65), #fff0 calc((var(--sz) * 0.65) + 1px);
	height: 100vh;
	--bg: radial-gradient(circle at 97% 62%, var(--c1) var(--pz)) var(--ts),
		radial-gradient(circle at 47% 62%, var(--c2) var(--pz)) var(--ts),
		radial-gradient(circle at 3% 88%, var(--c3) var(--pz)) var(--ts),
		radial-gradient(circle at 53% 88%, var(--c4) var(--pz)) var(--ts),
		radial-gradient(circle at 26% 77%, var(--c1) var(--pz)) var(--ts),
		radial-gradient(circle at 75% 77.........完整代码请登录后点击上方下载按钮下载查看