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