纯css实现金属钢板穿孔背景效果代码-html代码-BFW代码库

纯css实现金属钢板穿孔背景效果代码

代码语言：html

所属分类：背景

代码描述：纯css实现金属钢板穿孔背景效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        html {	
        	--u: 1.5vmin;
        	--r1: calc(var(--u) * 4);
        	--r2: calc(var(--u) * 4.1);
        	--r3: calc(var(--u) / 12);
          --r4: calc(var(--u) / 2.5);
          --r5: calc(var(--u) / 2.25);
          --r6: calc(var(--u) / 2);
          --c0: #050505;
        	--c1: #1c1c1c;
        	--c2: #404040;
        	--c3: #525252;
        	--c4: #808080;
        	--gp: 50%/calc(var(--u) * 10) calc(var(--u) * 16.8);
        	--border-fix: var(--c0) 0 25%, #fff0 0 100%;
        	--screw1: var(--c4) var(--r3), #fff0 var(--r4);
        	--screw2: var(--c0), var(--c1) var(--r5), #fff0 var(--r6);
        	--hole1: var(--c0) var(--r1), #fff0 var(--r2) 100%;
        	--hole2: var(--c1) var(--r1), #fff0 var(--r2) 100%;
        	--hole3: var(--c4) var(--r1), #fff0 var(--r2) 100%;
          height: 100vh;
        	background: 
        		/* border fix */
        		conic-gradient(from 225deg at 40% 50%, var(--border-fix)) var(--gp), 
        		conic-gradient(from 45deg at 60% 50%, var(--border-fix)) var(--gp), 
        		conic-gradient(from -45deg at 50% 24%, var(--border-fix)) var(--gp), 
        		conic-gradient(from 135deg at 50% 76%, var(--border-fix)) var(--gp),
        		/* screws */
        		radial-gradient(circle at 99.5% 83.5%, var(--screw1)) var(--gp),
        		radial-gradient(circle at 100% 84%, var(--screw2)) var(--gp),
        		radial-gradient(circle at -0.5% 83.5%, var(--screw1)) var(--gp),
        		radial-gradient(circle at 0% 84%, var(--screw2)) var(--gp),
        		radia.........完整代码请登录后点击上方下载按钮下载查看