纯css实现带阴影钢丝铁网背景效果代码

代码语言:html

所属分类:背景

代码描述:纯css实现带阴影钢丝铁网背景效果代码

代码标签: css 阴影 钢丝 铁网 背景

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        html {	
        	--u: 2vmin;
        	--r: calc(var(--u) / 1.75);
        	--c0: #09222e; 
        	--c1: #0f536880;
        	--rad: var(--c0) 0 var(--r), #fff0 calc(var(--r) + 0.1vmin) 100%;
        	--rad2: var(--c1) 0 var(--r), #fff0 calc(var(--r) + 1vmin) 100%;
        	--lin: #fff0 0% 23%, var(--c0) 23% 27%, #fff0 27% 73%, var(--c0) 73% 77%, #fff0 77% 100%;
        	--lin2: #fff0 0% 12%, var(--c1) 15% 19%, #fff0 22% 62%, var(--c1) 65% 69%, #fff0 72% 92%;
        	--lin3: #fff0 0% 12%, var(--c1) 15% 19%, #fff0 22% 62%, var(--c1) 65% 69%, #fff0 72% 100%;
        	--gp: 50%/calc(var(--u) * 10) calc(var(--u) * 10);
        	height: 100vh;
        	background: 
        		radial-gradient(circle at 50% 100%, var(--rad)) var(--gp),
        		radial-gradient(circle at .........完整代码请登录后点击上方下载按钮下载查看

网友评论0