纯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: #000; min-height: 100vh; display: flex; justify-content: center; align-items: center; perspective: 400px; perspective-origin: center calc(50% - 100px); overflow: hidden; } .rise { position: relative; transform-style: preserve-3d; -webkit-animation: riseRotate 30s infinite linear; animation: riseRotate 30s infinite linear; } @-webkit-keyframes riseRotate { from { transform: rotateX(90deg) rotate(0); } to { transform: rotateX(90deg) rotate(-360deg); } } @keyframes riseRotate { from { transform: rotateX(90deg) rotate(0); } to { transform: rotateX(90deg) rotate(-360deg); } } .step { position: absolute; width: 25px; height: 25px; transform-style: preserve-3d; -webkit-animation: stepPosition 15s infinite linear; animation: stepPosition 15s infinite linear; } .step:nth-child(1) { top: -75px; left: -75px; } .step:nth-child(6) { top: -75px; left: 50px; } .step:nth-child(11) { top: 50px; left: 50px; } .step:nth-child(16) { top: 50px; left: -75px; } .step:nth-child(2) { top: -75px; left: -50px; } .step:nth-child(7) { top: -50px; left: 50px; } .step:nth-child(12) { top: 50px; left: 25px; } .step:nth-child(17) { top: 25px; left: -75px; } .step:nth-child(3) { top: -75px; left: -25px; } .step:nth-child(8) { top: -25px; left: 50px; } .step:nth-child(13) { top: 50px; left: 0px; } .step:nth-child(18) { top: 0px; left: -75px; } .step:nth-child(4) { top: -75px; left: 0px; } .step:nth-child(9) { top: 0px; left: 50px; } .step:nth-child(14) { top: 50px; left: -25px; } .step:nth-child(19) { top: -25px; left: -75px; } .step:nth-child(5) { top: -75px; left: 25px; } .step:nth-child(10) { top: 25px; left: 50px; } .step:nth-child(15) { top: 50px; left: -50px; } .step:nth-child(20) { top: -50px; left: -75px; } .step:nth-child(1) { -webkit-animation-delay: -15s; animation-delay: -15s; background-color: #ef8f8f; } .step:nth-child(1)::after { -webkit-animation-delay: -15s, -15s, 0s; animation-delay: -15s, -15s, 0s; } .step:nth-child(2) { -webkit-animation-delay: -14.25s; animation-delay: -14.25s; background-color: #efac8f; } .step:nth-child(2)::after { -webkit-animation-delay: -14.25s, -14.25s, 0s; animation-delay: -14.25s, -14.25s, 0s; } .step:nth-child(3) { -webkit-animation-delay: -13.5s; animatio.........完整代码请登录后点击上方下载按钮下载查看
网友评论0