css实现小球从墙上弹下来动画效果代码
代码语言:html
所属分类:动画
代码描述: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; } body { background-color: #111; color: #fff; min-height: 100vh; display: flex; justify-content: center; align-items: center; perspective: 800px; overflow: hidden; } .fall { position: relative; transform-style: preserve-3d; -webkit-animation: fallRotate 42s infinite linear; animation: fallRotate 42s infinite linear; } @-webkit-keyframes fallRotate { to { transform: rotateY(360deg); } } @keyframes fallRotate { to { transform: rotateY(360deg); } } .wall { position: absolute; width: 80px; height: 80px; transform-style: preserve-3d; background-image: linear-gradient(#0007, #000c); -webkit-animation: move 15s infinite linear; animation: move 15s infinite linear; bottom: -210px; } .wall:nth-child(odd) { left: -10px; transform: translate(-50%, 50%) rotateY(90deg) rotateX(45deg) translatez(-20px) translateY(-220px); } .wall:nth-child(even) { left: 10px; transform: translate(-50%, 50%) rotateY(-90deg) rotateX(45deg) translatez(-20px) translateY(-220px); } .wall:nth-child(1) { -webkit-animation-delay: -1.5s; animation-delay: -1.5s; background-color: #ef8f8f; } .wall:nth-child(2) { -webkit-animation-delay: -3s; animation-delay: -3s; background-color: #efc98f; } .wall:nth-child(3) { -webkit-animation-delay: -4.5s; animation-delay: -4.5s; background-color: #dcef8f; } .wall:nth-child(4) { -webkit-animation-delay: -6s; animation-delay: -6s; background-color: #a3ef8f; } .wall:nth-child(5) { -webkit-animation-delay: -7.5s; animation-delay: -7.5s; background-color: #8fefb6; } .wall:nth-child(6) { -webkit-animation-delay: -9s; animation-delay: -9s; background-color: #8fefef; } .wall:nth-child(7) { -webkit-animation-delay: -10.5s; animation-delay: -10.5s; background-color: #8fb6ef; } .wall:nth-child(8) { -webkit-animation-delay: -12s; animation-delay: -12s; background-color: #a38fef; } .wall:nth-child(9) { -webkit-animation-delay: -13.5s; animation-delay: -13.5s; background-color: #dc8fef; } .wall:nth-child(10) { -webkit-animation-delay: -15s; animation-delay: -15s; background-color: #ef8fc9; } @-webkit-keyframes move { from { bottom: -1210px; } to { bottom: 810px; } } @keyframes move { from { bottom: -1210px; } to { bottom: 810px; } } .wall > div { position: absolute; background-color: inherit; } .wall .ceil { width: 80px; height: 80px; background-image: linear-gradient(#fff7, #fff0); -webkit-animation: wallCeil 15s infinite linear; animation: wallCeil 15s infinite linear; -webkit-animation-delay: inherit; animation-delay: inherit; overflow: hidden; } .wall .ceil::after { content: ""; position: absolute; width: 100%; height: 100%; background-image: radial-gradient(#000, #0000 50%); -webkit-animation: shadow 15s infinite linear; animation: shadow 15s infinite linear; -webkit-animation-delay: inherit; animation-delay: inherit; } @-webkit-keyframes shadow { 0%, 48%, 53%, 100% { opacity: 0; transform: translateY(80px) scale(2); } 50% { opacity: 0.25; transform: translateY(4px) scale(0.5); } } @keyframes shadow { 0%, 48%, 53%, 100% { opacity: 0; transform: translateY(80px) scale(2); } 50% { opacity: 0.25; transform: translateY(4px) scale(0.5); } } .wall .top { width: 80px; transform: rotateX(90deg); transform-origin: top; background-image: linear-gradient(#0007, #fff7); -webkit-animation: wallHeight 15s infinite linear; animation: wallHeight 15s infinite linear; -webkit-animation-delay: inherit; animation-delay: inherit; } .wall .bottom { bottom: 0; width: 80px; transform: rotateX(-90deg); transform-origin: bottom; background-image: linear-gradient(#fff0, #000c); -webkit-animation: wallHeight 15s infinite linear; animation: wallHeight 15s infinite linear; -webkit-animation-delay: inherit; animation-delay: inherit; } .wall .left { bottom: 0; height: 80px; transform: rotateY(-90deg); transform-origin: left; background-image: linear-gradient(to bottom left, #fff3, #000c); -webkit-animation: wallWidth 15s infinite linear; animation: wallWidth 15s infinite linear; -webkit-animation-delay: inherit; animation-delay: inherit; } .wall .right { bottom: 0; right: 0; height: 80px; transform: rotateY(90deg); transform-origin: right; background-image: linear-gradient(to bottom right, #fff3, #000c); -webkit-animation: wallWidth 15s infinite linear; animation: wallWidth 15s infinite linear; -webkit-animation-delay: inherit; animation-delay: inherit; } @-webkit-keyframes wallCeil { 0%, 49.75%, 55%, 100% { transform: translateZ(20px); } 50% { transform: translateZ(10px); } } @keyf.........完整代码请登录后点击上方下载按钮下载查看
网友评论0