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% + calc(var(--sz) * 3.05)) calc(50% - calc(var(--sz) * 1.95)), var(--c3) 0 120deg, #fff0 0 360deg),
        		conic-gradient(from -120deg at 50% calc(50% - calc(var(--sz) * 3.7)), var(--c2) 0 240deg, #fff0 0 360deg),
        		conic-gradient(from 120deg at calc(50% - calc(var(--sz) * 2.65)) calc(50% + calc(var(--sz) / 0)), var(--c2) 0 120deg, var(--c3) 0 240deg, #fff0 0 360deg),
        		conic-gradient(from 0deg at calc(50% + calc(var(--sz) * 6)) calc(50% + calc(var(--sz) / 2)), var(--c1) 0 120deg, var(--c2) 0 240deg, #fff0 0 360deg),
        		conic-gradient(from -120deg at 50% calc(50% - calc(var(--sz) * 5)), var(--c3) 0 120deg, var(--c1) 0 240deg, #fff0 0 360deg),
        		/*4*/
        		conic-gradient(from 240deg at calc(50% - calc(var(--sz) * 2.625)) calc(50% - calc(var(--sz) * -1.5)), var(--c3) 0 120deg, #fff0 0 360deg),
        		conic-gradient(from 180deg at 50% calc(50% + calc(var(--sz) * 3.01)), var(--c2) 0 120deg, #fff0 0 360deg),
        		conic-gradient(from 120deg at calc(50% + calc(var(--sz) * 2.525)) calc(50% + calc(var(--sz) * 1.55)), var(--c2) 0 120deg, #fff0 0 360deg),
        		conic-gradient(from 0deg at calc(5.........完整代码请登录后点击上方下载按钮下载查看

网友评论0