纯css实现鱼鳞片背景效果代码-html代码-BFW代码库

代码语言：html

所属分类：背景

代码描述：纯css实现鱼鳞片背景效果代码，纯css代码布局实现。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html {	
        	--u: 1.5vmin;
        	--c1: #ebfdff;
        	--c2: #4344af;
        	--c3: #434eaf;
        	--c4: #3a64b750;
        	--c5: #3a4db740;
        	--c6: #3a4db740;	
        	--draw-mid: #fff0 0 calc(var(--u) * 3.25), var(--c4) calc(var(--u) * 3.5), #fff0 calc(var(--u) * 3.75) 100%;
        	--draw-left: #fff0 0 calc(var(--u) * 3.25), var(--c5) calc(var(--u) * 3.5), #fff0 calc(var(--u) * 3.75) 100%;
        	--draw-right: #fff0 0 calc(var(--u) * 3.25), var(--c6) calc(var(--u) * 3.5), #fff0 calc(var(--u) * 3.75) 100%;
        	--draw-white: var(--c1) calc(var(--u) * 3.58) calc(var(--u) * 3.62), #fff0 calc(var(--u) * 3.66) 100%;
        	--p1: var(--c1) calc(var(--u) * 3.5), var(--c3) calc(var(--u) * 3.9), #fff0 calc(var(--u) * 4) 100%;
        	--p2: var(--c1) calc(var(--u) * 3.75), #fff0 calc(var(--u) * 4) 100%;
        	--c0: circle at 0%;
        	--c50: circle at 50%;
        	--c100: circle at 100%;
        	--gp: 50%/calc(var(--u) * 10) calc(var(--u) * 10);
        	height: 100vh;
        	background: 
        		
        		repeating-linear-gradient(90deg, #00bcd430 , #3bffb638 calc(var(--u) * 5), #00bcd430 calc(var(--u) * 10)),
        	
        		radial-gradient(var(--c50) -36%, var(--p1)) var(--gp), 
        		
        		/*** top right ***/ 
        		radial-gradient(var(--c100) -34%, var(--draw-right)) var(--gp), 
        		radial-gradient(var(--c100) -30%, var(--draw-right)) var(--gp), 
        		radial-gradient(var(--c100) -26%, var(--draw-right)) var(--gp), 
        		radial-gradient(var(--c100) -22%, var(--draw-right)) var(--gp), 
        		radial-gradient(var(--c100) -18%, var(--draw-right)) var(--gp), 
        		radial-gradient(var(--c100) -14%, var(--draw-right)) var(--gp), 
        		radial-gradient(var(--c100) -10%, var(--draw-right)) var(--gp), 
        		radial-gradient(var(--c100) -6%, var(--draw-right)) var(--gp), 
        		radial-gradient(var(--c100) -2%, var(--draw-right)) var(--gp), 
        		radial-gradient(var(--c100) 2%, var(--draw-right)) var(--gp), 
        		radial-gradient(var(--c100) 6%, var(--draw-right)) var(--gp), 
        		radial-gradient(var(--c100) 8%, var(--draw-white)) var(--gp), 
        		radial-gradient(var(--c100) 10%, var(--draw-right)) var(--gp), 
        		radial-gradient(var(--c100) 12%, var(--draw-white)) var(--gp), 
        		radial-gradient(var(--c100) 14%, var(--draw-right)) var(--gp), 
        		
        		
        		/*** top left ***/ 
        		radial-gradient(var(--c0) -34%, var(--draw-left)) var(--gp), 
        		radial-gradient(var(--c0) -30%, var(--draw-left)) var(--gp), 
        		radial-gradient(var(--c0) -26%, var(--draw-left)) var(--gp), 
        		radial-gradient(var(--c0) -22%, var(--draw-left)) var(--gp), 
        		radial-gradient(var(--c0) -18%, var(--draw-left)) var(--gp), 
        		radial-gradient(var(--c0) -14%, var(--draw-left)) var(--gp), 
        		radial-gradient(var(--c0) -10%, var(--draw-left)) var(--gp), 
        		radial-gradient(var(--c0) -6%, var(--draw-left)) var(--gp), 
        		radial-gradient(var(--c0) -2%, var(--draw-left)) var(--gp), 
        		radial-gradient(var(--c0) 2%, var(--draw-left)) var(--gp), 
        		radial-gradient(var(--c0) 6%, var(--draw-left)) var(--gp), 
        		radial-gradient(var(--c0) 8%, var(--draw-white)) var(--gp), 
        		radial-gradient(var(--c0) 10%, var(--draw-left)) var(--gp), 
        		radial-gradient(var(--c0) 12%, var(--draw-white)) var(--gp), 
        		radial-gradient(var(--c0) 14%, var(--draw-left)) var(--gp), 
        		
        		
        		radial-gradient(var(--c100) 12%, var(--p2)) var(--gp), 
        		radial-gradient(var(--c100) 15%, var(--p1)) var(--gp), 
        		radial-gradient(var(--c0) 12%, var(--p2)) var(--gp), 
        		radial-gradient(var(--c0) 15%, var(--p1)) var(--gp), 
        		
        		
        		/*** middle ***/ 
        		radial-gradient(var(--c50) -22%, var(--draw-mid)) var(--gp), 
        		linear-gradient(180deg, #fff0 0 1%, var(--c2) 1%, var(--c1) 14%, #fff0 15% 100%) var(--gp), 
        		radial-gradient(var(--c50) -18%, var(--draw-mid)) var(--gp), 
        		radial-gradient(var(--c50) -14%, var(--draw-mid)) var(--gp), 
        	.........完整代码请登录后点击上方下载按钮下载查看