纯css实现3d三维毛刺效果
代码语言:html
所属分类:三维
代码描述:纯css实现3d三维毛刺效果,采用2个div实现众多毛刺的效果,无需js
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --step: calc(100% / 28); --mask-step: 5%; } BODY { min-height: 100vh; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; flex-wrap: wrap; -webkit-box-pack: center; justify-content: center; -webkit-perspective: 1500px; perspective: 1500px; -webkit-perspective-origin: center -15em; perspective-origin: center -15em; background: #000; } .ball { position: relative; width: 300px; height: 300px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: rotate 12s linear infinite; animation: rotate 12s linear infinite; } .slice { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .slice:nth-child(1) { --direction: 1; -webkit-transform: rotateY(-90deg) rotateZ(170deg); transform: rotateY(-90deg) rotateZ(170deg); } .slice:nth-child(2) { --direction: -1; } .slice, .slice::before, .slice::after { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: conic-gradient(teal var(--step), transparent 0, transparent calc(var(--step) * 2), purple 0, purple calc(var(--step) * 3), transparent 0, transparent calc(var(--step) * 4), crimson 0, crimson calc(var(--step) * 5), transparent 0, transparent calc(var(--step) * 6), tomato 0, tomato calc(var(--step) * 7), transparent 0, transparent calc(var(--step) * 8), gold 0, gold calc(var(--step) * 9), transparent 0, transparent calc(var(--step) * 10), yellowgreen 0, yellowgreen calc(var(--step) * 11), transparent 0, transparent calc(var(--step) * 1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0