纯css实现三维螺纹方块旋转效果
代码语言:html
所属分类:三维
代码描述:纯css实现三维螺纹方块旋转效果,使用div进行6个面的布局
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --step: calc(100% / 7.5); --side: 30vmin; --offset: 15vmin; --offset-neg: -15vmin; font-size: 16px; } BODY { min-height: 100vh; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; -webkit-perspective: 300px; perspective: 300px; -webkit-perspective-origin: center center; perspective-origin: center center; overflow: hidden; background: #000; } .side, .container { width: var(--side); height: var(--side); } .container { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: rotate 10s infinite linear; animation: rotate 10s infinite linear; } .container:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } .side { position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; background: conic-gradient(teal, purple, crimson, tomato, gold, yellowgreen, mediumaquamarine, teal); -webkit-mask-image: repeating-radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--step) * 1), black 0, black calc(var(--step) * 1.5), rgba(0, 0, 0, 0) 0); mask-image: repeating-radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--step) * 1), black 0, black calc(var(--step) * 1.5), rgba(0, 0, 0, 0) 0); -webkit-mask-size: 50% 50%; mask-size: 50% 50%; -webkit-mask-position: center center; mask-position: center center; } .back { -webkit-transform: translateZ(va.........完整代码请登录后点击上方下载按钮下载查看
网友评论0