div+css实现三维打高尔夫球动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现三维打高尔夫球动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } html { font-size: 10px; } body { background-color: #555; background-image: linear-gradient(#200, #002); color: #fff; min-height: 100vh; display: grid; place-items: center; perspective: 80em; overflow: hidden; } body *:not(:empty) { transform-style: preserve-3d; } body:active * { -webkit-animation-play-state: paused !important; animation-play-state: paused !important; } .scene { position: relative; -webkit-animation: scene 12s infinite ease-in-out; animation: scene 12s infinite ease-in-out; } .scene .sceneAngle { position: absolute; -webkit-animation: sceneAngle 12s infinite ease-in-out; animation: sceneAngle 12s infinite ease-in-out; } @-webkit-keyframes scene { 0%, 30% { transform: rotateY(80deg); } 60%, 90% { transform: rotateY(-100deg); } 100% { transform: rotateY(-280deg); } } @keyframes scene { 0%, 30% { transform: rotateY(80deg); } 60%, 90% { transform: rotateY(-100deg); } 100% { transform: rotateY(-280deg); } } @-webkit-keyframes sceneAngle { 0%, 30%, 100% { transform: translateZ(7em) rotateX(0deg); } 45% { transform: translateZ(30em) rotateX(-45deg); } 60%, 90% { transform: translateZ(-7em) rotateX(0deg); } } @keyframes sceneAngle { 0%, 30%, 100% { transform: translateZ(7em) rotateX(0deg); } 45% { transform: translateZ(30em) rotateX(-45deg); } 60%, 90% { transform: translateZ(-7em) rotateX(0deg); } } .course { position: absolute; inset: -5em -50em; background-image: radial-gradient(at 2px 2px, #0007, transparent 1px), radial-gradient(at 6px 6px, #0007, transparent 1px), radial-gradient(circle at 95em 5em, transparent 0.5em, #0a0 0.5em); background-size: 8px 8px, 8px 8px, 100% 100%; transform: rotateX(-90deg) translateZ(6.05em); } .course .floor { content: ""; position: absolute; inset: -100em; border-radius: 50%; background-image: repeating-linear-gradient(45deg, #fff2 0 1px, transparent 0 3em), repeating-linear-gradient(135deg, #fff2 0 1px, transparent 0 3em), radial-gradient(circle at 195em 50%, transparent 0.5em, #000 0.5em); transform: translateZ(1px); } .ball { position: absolute; left: -45em; top: 5em; -webkit-animation: ball 12s infinite ease-in; animation: ball 12s infinite ease-in; } .ball .ballA { position: absolute; -webkit-animation: ballA 12s infinite ease-in-out; animation: ballA 12s infinite ease-in-out; } .ball .ballB { position: absolute; inset: -0.25em; background-color: #fff; background-image: radial-gradient(#0000, #000); background-size: 150% 150%; border-radius: 50%; -webkit-animation: ballB 12s infinite ease-in-out; animation: ballB 12s infinite ease-in-out; } @-webkit-keyframes ball { 0% { transform: translateX(0em) translateY(-50em); } 11%, 17%, 21%, 25%, 30% { transform: translateX(0em) translateY(0.75em); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 14% { transform: translateX(0em) translateY(-4em); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 19% { transform: translateX(0em) translateY(-1em); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 23% { transform: translateX(0em) translateY(0.25em); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 65% { transform: translateX(90em) translateY(0.75em); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform: translateX(90em) translateY(30em); } } @keyframes ball { 0% { transform: translateX(0em) translateY(-50em); } 11%, 17%, 21%, 25%, 30% { transform: translateX(0em) translateY(0.75em); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 14% { transform: translateX(0em) translateY(-4em); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 19% { transform: translateX(0em) translateY(-1em); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 23% { transform: translateX(0em) translateY(0.25em); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 65% { transform: translateX(90em) translateY(0.75em); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { transform: translateX(90em) translateY(30em); } } @-webkit-keyframes ballA { 0%, 30% { transform: rotateY(100deg); } 60%, 100% { transform: rotateY(280deg); } } @keyframes ballA { 0%, 30% { transform: rotateY(100deg); } 60%, 100% { transform: rotateY(280deg); } } @-webkit-keyframes ballB { 0%, 30%, 60%, 100% { transform: rotateX(0deg); background-position: 50% 100%; } 45% { transform: rotateX(-45deg); background-position: 50% 60%; } } @keyframes ballB { 0%, 30%, 60%, 100% { transform: rotateX(0deg); background-position: 50% 100%; } 45% { transform: rotateX(-45deg); background-position: 50% 60%; } } .ballShadow { position: absolute; left: 4.25em; top: 4.25em; width: 1.5em; height: 1.5em; background-image: radial-gradient(closest-side, #0003, transparent); -webkit-animation: ballShadow 12s infinite ease-in-out; animation: ballShadow 12s infinite ease-in-out; } @-webkit-keyframes ballShadow { 0%, 5% { transform: scale(2); opacity: 0; } 11%, 17%, 21%, 25%, 30% { transform: scale(1); opacity: 1; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 14% { transform: scale(2); opacity: 0.4; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 19% { transform: scale(1.6); opacity: 0.6; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 23% { transform: scale(1.3); opacity: 0.8; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 65% { transform: scale(1) translateX(90em); opacity: 1; } 66%, 100% { transform: scale(1) translateX(90em); opacity: 0; } } @keyframes ballShadow { 0%, 5% { transform: scale(2); opacity: 0; } 11%, 17%, 21%, 25%, 30% { transform: scale(1); opacity: 1; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 14% { transform: scale(2); opacity: 0.4; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 19% { transform: scale(1.6); opacity: 0.6; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 23% { transform: scale(1.3); opacity: 0.8; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 65% { transform: scale(1) translateX(90em); opacity: 1; } 66%, 100% { transform: scale(1) translateX(90em); opacity: 0; } } .club { position: absolute; left: -45em; top: -2em; -webkit-animation: club 12s infinite ease-in-out; animation: club 12s infinite ease-in-out; } @-webkit-keyframes club { 0%, 60%, 100% { transform: translateZ(-2em) rotateX(10deg); } 26% { transform: translateZ(-2em) rotateX(10deg) rotateZ(150deg); } 31.61% { transform: translateZ(-2em) rota.........完整代码请登录后点击上方下载按钮下载查看
网友评论0