css实现3D花岗岩长方体效果代码
代码语言:html
所属分类:布局界面
代码描述: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