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% 68%,
		hsl(221, 83%, 55%) 68% 70%,
		transparent 70%),
	linear-gradient(var(--angle),
		hsl(279, 81%, 69%) calc(72% + var(--col6, 0%)), 
		hsl(280, 77%, 54%) 72% 74%, 
		hsl(278, 73%, 61%) 74% 76%, 
		hsl(279, 67%, 46%) 76% 78%,
		hsl(276, 79%, 73%) 78% 80%,
		hsl(261, 45%, 52%) 80% 82%,
		hsl(281, 83%, 55%) 82% 84%,
		transparent 84%),
	linear-gradient(var(--angle),
		hsl(309, 81%, 69%) calc(86% + var(--col7, 0%)), 
		hsl(310, 77%, 54%) 86% 88%, 
		hsl(308, 73%, 61%) 88% 90%, 
		hsl(299, 67%, 46%) 90% 92%,
		hsl(296, 79%, 73%) 92% 94%,
		hsl(291, 45%, 52%) 94% 96%,
		hsl(321, 83%, 55%) 96% 98%,
		transparent 98%),
	linear-gradient(var(--angle),
		hsl(341, 81%, 69%) 100%,
		transparent 100%);

	margin: unset;
	min-block-size: 100%;
	min-inline-size: 100%;
	overflow: hidden;.........完整代码请登录后点击上方下载按钮下载查看