css+div实现三维小球桌面立体圆周运动代码
代码语言:html
所属分类:动画
代码描述:css+div实现三维小球桌面立体圆周运动代码
代码标签: css div 三维 小球 桌面 立体 圆周 运动 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: #000; color: #fff; min-height: 100vh; display: grid; place-items: center; perspective: 800px; overflow: clip; font-size: 12px; * { transform-style: preserve-3d; } } .scene { position: relative; -webkit-animation: scene 144s linear infinite; animation: scene 144s linear infinite; * { position: absolute; } } @-webkit-keyframes scene { from { transform: rotateX(30deg) rotateZ(0deg); } to { transform: rotateX(30deg) rotateZ(-360deg); } } @keyframes scene { from { transform: rotateX(30deg) rotateZ(0deg); } to { transform: rotateX(30deg) rotateZ(-360deg); } } .floor { inset: -40em; background-color: #fff2; background: radial-gradient(closest-side, transparent, black), repeating-conic-gradient(#aaf8 0 30deg, #003 0 60deg) 0 0 / 2em 2em; } .wall { inset: -3.25em -6.5em; translate: 0 -3.25em; transform-origin: bottom; i { --color: hsl(200 0% var(--i) * 4%); inset: 0; border-radius: 50% / 100% 100% 0 0; border: solid hsl(0 0% calc(var(--i) * 3%)) 0.5em; border-bottom: none; transform: translateZ(calc(var(--i) * 2px)); &:first-child { filter: blur(0.3em); } } &.main { -webkit-animation: mainWall 2s linear infinite; animation: mainWall 2s linear infinite; } &.out { transform: rotate(calc(var(--w) * 45deg)) translateY(-20em); i { -webkit-animation: outWall 6s calc(var(--w) * -3.75s) linear infinite; animation: outWall 6s calc(var(--w) * -3.75s) linear infinite; } } } @-webkit-keyframes mainWall { to { rotate: 360deg; } } @keyframes mainWall { to { rotate: 360deg; } } @-webkit-keyframes outWall { 0%, 35%, 100% { opacity: 0.05; transform: translateZ(0); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0