css实现彩色方块线条动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现彩色方块线条动画效果代码互物理碰撞效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
:root {
	--size: 50;
	--speed: 10;
	--trans: linear;
	--hole: #121212;
	--red: red;
	--orange: #ff5722;
	--yellow: #ffc107;
	--green: #b7dc39;
	--cyan: #39dcc7;
	--blue: #3992dc;
	--purple: #4739dc;
	--violet: #9c39dc;
	--pink: #dc399c;
	--brown: #b13333;
	--ini: from 90deg at;
	--end: 0 25%, #fff0 0 100%;

	--bg:	
		conic-gradient(var(--ini) 97.5% 97.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 95% 95%, var(--brown) var(--end)), 
		conic-gradient(var(--ini) 92.5% 92.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 90% 90%, var(--pink) var(--end)), 
		conic-gradient(var(--ini) 87.5% 87.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 85% 85%, var(--violet) var(--end)), 
		conic-gradient(var(--ini) 82.5% 82.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 80% 80%, var(--purple) var(--end)), 
		conic-gradient(var(--ini) 77.5% 77.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 75% 75%, var(--blue) var(--end)), 
		conic-gradient(var(--ini) 72.5% 72.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 70% 70%, var(--cyan) var(--end)), 
		conic-gradient(var(--ini) 67.5% 67.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 65% 65%, var(--green) var(--end)), 
		conic-gradient(var(--ini) 62.5% 62.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 60% 60%, var(--yellow) var(--end)), 
		conic-gradient(var(--ini) 57.5% 57.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 55% 55%, var(--orange) var(--end)), 
		conic-gradient(var(--ini) 52.5% 52.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 50% 50%, var(--red) var(--end)), 
		conic-gradient(var(--ini) 47.5% 47.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 45% 45%, var(--brown) var(--end)),
		conic-gradient(var(--ini) 42.5% 42.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 40% 40%, var(--pink) var(--end)),
		conic-gradient(var(--ini) 37.5% 37.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 35% 35%, var(--violet) var(--end)),
		conic-gradient(var(--ini) 32.5% 32.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 30% 30%, var(--purple) var(--end)),
		conic-gradient(var(--ini) 27.5% 27.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 25% 25%, var(--blue) var(--end)),
		conic-gradient(var(--ini) 22.5% 22.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 20% 20%, var(--cyan) var(--end)),
		conic-gradient(var(--ini) 17.5% 17.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 15% 15%, var(--green) var(--end)),
		conic-gradient(var(--ini) 12.5% 12.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 10% 10%, var(--yellow) var(--end)),
		conic-gradient(var(--ini) 7.5% 7.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 5% 5%, var(--orange) var(--end)),
		conic-gradient(var(--ini) 2.5% 2.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 0% 0%, var(--red) var(--end));

	--bg-side:	
		conic-gradient(var(--ini) 97.5% 97.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 95% 95%, var(--orange) var(--end)), 
		conic-gradient(var(--ini) 92.5% 92.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 90% 90%, var(--yellow) var(--end)), 
		conic-gradient(var(--ini) 87.5% 87.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 85% 85%, var(--green) var(--end)), 
		conic-gradient(var(--ini) 82.5% 82.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 80% 80%, var(--cyan) var(--end)), 
		conic-gradient(var(--ini) 7.........完整代码请登录后点击上方下载按钮下载查看