纯css实现彩虹七彩祥云背景效果代码

代码语言:html

所属分类:背景

代码描述:纯css实现彩虹七彩祥云背景效果代码

代码标签: css 彩虹 七彩 背景

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html {	
        	--u: 1.25vmin;
        	--c1: #9422f1;
        	--c2: #25e5fc;
        	--c3: #149fec;
        	--c4: #89ed00;
        	--c5: #f9f300;
        	--c6: #f5b900;
        	--c7: #ec0000;
        	--c8: #ff4545;
        	--c9: #ffffff;
        	--c0: #2c2c2c;
          --gp: 50%/calc(var(--u) * 18) calc(var(--u) * 12);
          --rainbow: 
        		var(--c0) 0 calc(var(--u) * 2.25), 
        		var(--c1) 0 calc(var(--u) * 3.25), 
        		var(--c2) calc(var(--u) * 3.35) calc(var(--u) * 4.25), 
        		var(--c3) calc(var(--u) * 4.35) calc(var(--u) * 5.25), 
        		var(--c4) calc(var(--u) * 5.35) calc(var(--u) * 6.25), 
        		var(--c5) calc(var(--u) * 6.35) calc(var(--u) * 7.25), 
        		var(--c6) calc(var(--u) * 7.35) calc(var(--u) * 8.25), 
        		var(--c7) calc(var(--u) * 8.35) calc(var(--u) * 9.25), 
        		#fff0 calc(var(--u) * 9.35) 100%;
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0