div+css实现三维小球在球桌上来回滚动动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现三维小球在球桌上来回滚动动画效果代码
代码标签: div css 三维 小球 球桌 来回 滚动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @property --tx { syntax: "<length>"; inherits: false; initial-value: 0; } @property --ty { syntax: "<length>"; inherits: false; initial-value: 0; } @property --rz { syntax: "<angle>"; inherits: false; initial-value: 0deg; } *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: #111; color: #fff; min-height: 100vh; display: grid; place-items: center; perspective: 1200px; overflow: hidden; } body *:not(:empty) { transform-style: preserve-3d; } .scene { position: relative; -webkit-animation: sceneRotate 30s infinite linear; animation: sceneRotate 30s infinite linear; } @-webkit-keyframes sceneRotate { from { transform: translateY(3em) rotateX(75deg) rotateZ(0deg); } to { transform: translateY(3em) rotateX(75deg) rotateZ(360deg); } } @keyframes sceneRotate { from { transform: translateY(3em) rotateX(75deg) rotateZ(0deg); } to { transform: translateY(3em) rotateX(75deg) rotateZ(360deg); } } .movementContainer { position: absolute; width: 30em; height: 20em; transform: translate(-50%, -50%); } .ball { position: absolute; width: 4em; height: 4em; background-image: radial-gradient(circle at center, #0000, 87%, #000), radial-gradient(circle at top, lightblue, black); border-radius: 50%; transform-style: preserve-3d; transform: translate(calc(var(--tx) - 50%), calc(var(--ty) - 50%)) rotateZ(var(--rz)) rotateX(-75deg); -webkit-animation: ballLeft 2s infinite linear alternate, ballTop 1.2s infinite linear alternate, ballRotate 30s infinite linear; animation: ballLeft 2s infinite linear alternate, ballTop 1.2s infinite linear alternate, ballRotate 30s infinite linear; } @-webkit-keyframes ballRotate { from { --rz: 0deg; } to { --rz: -360deg; } } @keyframes ballRotate { from { --rz: 0deg; } to { --rz: -360deg; } } @-webkit-keyframes ballLeft { from { --tx: 0; } to { --tx: 30em; } } @keyframes ballLeft { from { --tx: 0; } to { --tx: 30em; } } @-webkit-keyframes ballTop { from { --ty: 0; } to { --ty: 20em; } } @keyframes ballTop { from { --ty: 0; } to { --ty: 20em; } } .ball::after { content: "".........完整代码请登录后点击上方下载按钮下载查看
网友评论0