纯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), 
       .........完整代码请登录后点击上方下载按钮下载查看