div+css实现走廊里三维小球跳动效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现走廊里三维小球跳动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --bgBrick: linear-gradient( -90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0) 70% ), repeating-linear-gradient(transparent, #3e0e00 40px), repeating-linear-gradient(0.25turn, transparent, #d73200 2px); --bgFloor: linear-gradient( 180deg, rgba(0, 0, 0, 1) 25%, rgba(144, 144, 144, 0.5) 100% ), repeating-linear-gradient(0.35turn, transparent, #242524 150px), repeating-linear-gradient(transparent, #575857 3px); } * { box-sizing: border-box; transform-style: preserve-3d; } body { background: radial-gradient(circle, black 0%, #0e0e0e 50%, #232323 75%, #5a5a5a 100%); height: 100vh; width: 100vw; perspective: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .scene { width: 1200px; height: 600px; position: relative; transform: translateY(-200px); } .scene > div:not(.ball) { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .scene .left { background: var(--bgBrick); transform: rotateY(90deg) translateZ(-600px); } .scene .right { background: var(--bgBrick); transform: rotateY(90deg) translateZ(600px); } .scene .top { background: linear-gradient(180deg, black 40%, #909090 100%); transform: rotateX(90deg) translateZ(300px); top: 100px; } .scene .bottom { background-image: var(--bgFloor); transform: rotateX(90deg) translateZ(-300px); } .scene .back { background-color: #010101; transform: translateZ(-300px); } .ball { position: absolute; left: 50%; bottom: 0; transform: translate3d(-50%, 0, -350px); background: radial-gradient(circle, rgba(10, 165, 189, 0.9990371148) 0%, #137f99 25%, #0f5674 75%, #122c65 100%); width: 200px; height: 200px; border-radius: 100%; -webkit-animation: bounce 6s ease-out infinite; animation: bounce 6s ease-out infinite; } @-webkit-keyframes bounce { 0% { transform: translateY(0) translateZ(-400px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 10% { transform: translateY(-1000px) translateZ(-355px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { transform: translateY(0) translateZ(-310px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 30% { transform: translateY(-1000px) translateZ(-265px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { transform: translateY(0) translateZ(-220px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { transform: translateY(-1000px) translateZ(-175px); -webkit-animation-timing-function: eas.........完整代码请登录后点击上方下载按钮下载查看
网友评论0