div+css布局实现方孔楼梯错觉效果代码-html代码-BFW代码库

div+css布局实现方孔楼梯错觉效果代码

代码语言：html

代码描述：div+css布局实现方孔楼梯错觉效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        :root {
        	--hue: 200; /*change color hue*/
          --sat: 30%; /*change saturation*/
        }
        
        body {
        	margin: 0;
        	height: 100vh;
        	display: flex;
        	align-items: center;
        	perspective: 100vmin;
        	overflow: hidden;
        	background: linear-gradient(143deg, hsl(var(--hue) var(--sat) 90%) 50%, hsl(var(--hue) var(--sat) 65%) );
        }
        
        .content {
        	width: 90vmin;
        	height: 60vmin;
        	margin: 0 auto;
        	justify-content: center;
        	display: inline-flex;
        }
        
        .hole {
        	transform: rotateX(55deg) rotateZ(45deg);
          margin-top: -6vmin;
        	box-shadow: 0 0 15px -10px #5f5f5f inset;
          background: 
        		conic-gradient(from 0deg at 78% 78%, #fff0 0% 25%, hsl(var(--hue) var(--sat) 27%) 0% 37.5%, hsl(var(--hue) var(--sat) 19%) 0% 50%, #fff0 0% 100%),
        		conic-gradient(from 0deg at 70.5% 70.5%, #fff0 0% 25%, hsl(var(--hue) var(--sat) 87.5%) 0% 50%, #fff0 0% 100%),
        		conic-gradient(from 0deg at 58% 58%, #fff0 0% 25%, hsl(var(--hue) var(--sat) 53%) 0% 37.5%, hsl(var(--hue) var(--sat) 37%) 0% 50%, #fff0 0% 100%),
        		conic-gradient(from 0deg at 50% 50%, #fff0 0% 25%, hsl(var(--hue) var(--sat) 87.5%) 0% 50%, #fff0 0% 100%),
        		conic-gradient(from 0deg at 35% 35%, #fff0 0% 25%, hsl(var(--hue) var(--sat) 67%) 0% 37.5%, hsl(var(--hue) var(--sat) 44%) 0% 50%, #fff0 0% 100%), 
        		conic-gradient(from 0deg at 23% 23%, #fff0 0% 25%, h.........完整代码请登录后点击上方下载按钮下载查看