css实现3D花岗岩长方体效果代码

代码语言:html

所属分类:布局界面

代码描述:css实现3D花岗岩长方体效果代码

代码标签: css 3D 花岗岩 长方体

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

<!DOCTYPE html>

<html lang="en">

<head>

   
<meta charset="UTF-8">






   
<style>
        html {
                --c1: #ffffff;
                --c2: #d0d0d0;
                --c3: #a3a3a3;
                --c4: #161616;
                --sz: 8vmin;
                height: 100vh;
                overflow: hidden;
                background:
                        /*background*/
                        linear-gradient(-150deg, var(--c4) calc(50% - calc(var(--sz) * 3.67)), #fff0 0),
                        linear-gradient(150deg, var(--c4) calc(50% - calc(var(--sz) * 3.67)), #fff0 0),
                        linear-gradient(-30deg, var(--c4) calc(50% - calc(var(--sz) * 3.645)), #fff0 0),
                        linear-gradient(30deg, var(--c4) calc(50% - calc(var(--sz) * 3.645)), #fff0 0),
                        linear-gradient(90deg,var(--c4) calc(50% - calc(var(--sz) * 3.64)), #fff0 0 calc(50% + calc(var(--sz) * 3.525)), var(--c4) 0),
                        /*granite*/
                        repeating-conic-gradient(#0004 0.00001%, transparent .00005%, transparent .0005%, transparent .00005%),
                        repeating-conic-gradient(#fff2 0.00002%, transparent .00008%, transparent .0008%, transparent .00008%),
                        /*6*/
                        conic-gradient(from 240deg at calc(50% - calc(var(--sz) * 3.625)) calc(50% - calc(var(--sz) * -2.125)), var(--c3) 0 120deg, #fff0 0 360deg),
                        conic-gradient(from 180deg at 50% calc(50% + calc(var(--sz) * 4.225)), var(--c2) 0 120deg, #fff0 0 360deg),
                        conic-gradient(from 120deg at calc(50% + calc(var(--sz) * 3.525)) calc(50% + calc(var(--sz) * 2.2)), var(--c2) 0 120deg, #fff0 0 360deg),
                        conic-gradient(from 0deg at calc(50% + calc(var(--sz) * 3.525)) calc(50% - calc(var(--sz) * -2.55)), var(--c1) 0 120deg, #fff0 0 360deg),
                        conic-gradient(from -120deg at 50% calc(50% - calc(var(--sz) * 4.25)), var(--c3) 0 120deg, var(--c1) 0 240deg, #fff0 0 360deg),
                        /*5*/
                        conic-gradient(from 180deg at calc(50% - calc(var(--sz) * 3.15)) calc(50% - calc(var(--sz) * 1.875)), var(--c1) 0 120deg, #fff0 0 360deg),
                        conic-gradient(from 180deg at 50% calc(50% + calc(var(--sz) * 3.6)), var(--c1) 0 120deg, #fff0 0 360deg),
                        conic-gradient(from 60deg at 50% calc(50% + calc(var(--sz) * 3.6)), var(--c3) 0 120deg, #fff0 0 360deg),
                        conic-gradient(from 60deg at calc(50%.........完整代码请登录后点击上方下载按钮下载查看

网友评论0