纯CSS三维八角环旋转效果
代码语言:html
所属分类:三维
代码描述:纯CSS三维八角环旋转效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
overflow: hidden;
margin: 0;
height: 100vh;
perspective: 35em;
background: #333;
}
div {
position: absolute;
transform-style: preserve-3d;
}
.a3d {
--ba: calc(1turn/var(--m));
--base-ri: 1em;
--base-rc: calc(var(--base-ri)/var(--cos));
--w: calc(4*var(--base-ri));
--o: calc(.5*var(--w));
top: 50%;
left: 50%;
}
@keyframes ry {
to {
transform: rotatey(0.5turn);
}
}
.s3d {
--ri: calc((2*(var(--idx) + 1))*var(--base-ri));
--rc: calc(var(--ri)/var(--cos));
--l: calc(2*var(--ri)*var(--tan));
--c: HSL(var(--hue), var(--sat), var(--lum));
--fn: cubic-bezier(calc(var(--idx)/var(--n)), calc(-.1*var(--idx)), calc(1 - var(--idx)/var(--n)), calc(1 + .1*var(--idx)));
animation: ry calc(var(--n)*1s) var(--fn) infinite;
}
.lat {
--in: 0;
--sgn-in: calc(1 - 2*var(--in));
--dif: var(--q)-1-var(--in);
--xor: calc(var(--dif)*var(--dif));
--sgn-xor: calc(1 - 2*var(--xor));
--end: calc(var(--in)*var(--base-ri)*var(--tan));
margin: calc(var(--end) - .5*var(--l)) calc(-1*var(--o));
width: var(--w);
height: calc(var(--l) - 2*var(--end));
transform: rotatex(calc((var(--i) + 1)*var(--ba))) translatez(calc(var(--in)*var(--base-ri) + var(--sgn-in)*var(--ri)));
box-shadow: 0 1px 1px var(--c), 0 -1px 1px var(--c);
background: radial-Gradient(HSL(var(--hue), calc(.9*var(--sat)), calc(1.05*var(--lum))), HSL(var(--hue), calc(1.25*var(--sat)), calc(.9*var(--lum))) 65%, HSL(var(--hue), var(--sat), calc(1.15*var(--lum)))) 50%/300%;
filter: brightness(calc(1 + var(--sgn-xor)*.2));
animation: shade calc(var(--n)*1s) var(--fn) infinite;
}
.lat:nth-child(2n) {
--in: 1;
}
@keyframes shade {
to {
filter: brightness(calc(1 - var(--sgn-xor)*.2));
}
}
.base {
--sgn-j: calc(1 - 2*var(--j));
margin: calc(-1*var(--rc));
width: 0;
padding: var(--rc);
transform: rotatey(calc(var(--sgn-j)*90deg)) translatez(var(--o)) rotate(var(--oa));
background: repeating-conic-gradient(var(--c) 0%, 0.25deg, HSL(var(--hue), var(--sat), calc(1.05*var(--lum))) calc(.0125*var(--ba)), HSL(var(--hue), calc(1.15*var(--sat)), calc(.9*var(--lum))) calc(.05*var(--ba)), HSL(var(--hue), calc(.95*var(--sat)), calc(1.05*var(--lum))) calc(.35*var(--ba)) calc(.65*var(--ba)), HSL(var(--hue), calc(1.15*var(--sat)), calc(.9*var(--lum))) calc(.95*var(--ba)), HSL(var(--hue), var(--sat), calc(1.05*var(--lum))) calc(.9875*var(--ba)), var(--c) calc(var(--ba) - .25deg) var(--ba));
clip-path: polygon(var(--vx));
}
</style>
</head>
<body translate="no">
<div .........完整代码请登录后点击上方下载按钮下载查看
网友评论0