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% + 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