css实现可调节彩色条纹效果代码-html代码-BFW代码库

css实现可调节彩色条纹效果代码

代码语言：html

代码描述：css实现可调节彩色条纹效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
html {
	block-size: 100%;
	inline-size: 100%;
}
body {
	--angle: 90deg;
  background: 
	linear-gradient(var(--angle),
		hsl(9, 81%, 69%) calc(2% + var(--col1, 0%)), 
		hsl(10, 77%, 54%) 2% 4%, 
		hsl(358, 73%, 61%) 4% 6%, 
		hsl(359, 67%, 46%) 6% 8%,
		hsl(356, 79%, 73%) 8% 10%,
		hsl(351, 45%, 52%) 10% 12%,
		hsl(11, 83%, 55%) 12% 14%,
		transparent 14%),
	linear-gradient(var(--angle),
		hsl(39, 81%, 69%) calc(16% + var(--col2, 0%)), 
		hsl(40, 77%, 54%) 16% 18%, 
		hsl(28, 73%, 61%) 18% 20%, 
		hsl(29, 67%, 46%) 20% 22%,
		hsl(26, 79%, 73%) 22% 24%,
		hsl(21, 45%, 52%) 24% 26%,
		hsl(41, 83%, 55%) 26% 28%,
		transparent 28%),
	linear-gradient(var(--angle),
		hsl(99, 81%, 69%) calc(30% + var(--col3, 0%)), 
		hsl(100, 57%, 54%) 30% 32%, 
		hsl(88, 73%, 61%) 32% 34%, 
		hsl(89, 67%, 46%) 34% 36%,
		hsl(86, 79%, 73%) 36% 38%,
		hsl(81, 45%, 52%) 38% 40%,
		hsl(101, 73%, 55%) 40% 42%,
		transparent 42%),
	linear-gradient(var(--angle),
		hsl(159, 81%, 69%) calc(44% + var(--col4, 0%)), 
		hsl(160, 67%, 54%) 44% 46%, 
		hsl(148, 73%, 61%) 46% 48%, 
		hsl(149, 67%, 46%) 48% 50%,
		hsl(146, 79%, 73%) 50% 52%,
		hsl(141, 45%, 52%) 52% 54%,
		hsl(161, 83%, 55%) 54% 56%,
		transparent 56%),
	linear-gradient(var(--angle),
		hsl(219, 81%, 69%) calc(58% + var(--col5, 0%)), 
		hsl(220, 77%, 54%) 58% 60%, 
		hsl(218, 73%, 61%) 60% 62%, 
		hsl(219, 67%, 46%) 62% 64%,
		hsl(216, 79%, 73%) 64% 66%,
		hsl(201, 45%, 52%) 66.........完整代码请登录后点击上方下载按钮下载查看