纯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