纯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-image: -webkit-gradient(linear, left top, left bottom, from(#cde), color-stop(50%, #fff), color-stop(50%, #fafafa), to(#ddd)); background-image: linear-gradient(#cde, #fff 50%, #fafafa 50%, #ddd); color: #fff; min-height: 100vh; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .cups { position: relative; width: 200px; height: 120px; } .cup { position: absolute; top: 25px; width: 60px; height: 120px; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transform-origin: center -100%; transform-origin: center -100%; } .cup:nth-child(1) { -webkit-animation: cupA 8s infinite ease-in-out; animation: cupA 8s infinite ease-in-out; } .cup:nth-child(1) .shadow { -webkit-animation: shadow 8s infinite ease-in-out; animation: shadow 8s infinite ease-in-out; } .cup:nth-child(1) .ball_shadow { -webkit-animation: ball 32s -24s infinite ease-in-out; animation: ball 32s -24s infinite ease-in-out; } .cup:nth-child(1) .ball { -webkit-animation: ball 32s -24s infinite ease-in-out; animation: ball 32s -24s infinite ease-in-out; } .cup:nth-child(1) .tin { -webkit-animation: tin 8s infinite ease-in-out; animation: tin 8s infinite ease-in-out; } .cup:nth-child(2) { -webkit-animation: cupB 8s infinite ease-in-out; animation: cupB 8s infinite ease-in-out; } .cup:nth-child(2) .shadow { -webkit-animation: shadow 8s 0.4s infinite ease-in-out; animation: shadow 8s 0.4s infinite ease-in-out; } .cup:nth-child(2) .ball_shadow { -webkit-animation: ball-mid 16s infinite ease-in-out; animation: ball-mid 16s infinite ease-in-out; } .cup:nth-child(2) .ball { -webkit-animation: ball-mid 16s infinite ease-in-out; animation: ball-mid 16s infinite ease-in-out; } .cup:nth-child(2) .tin { -webkit-animation: tin 8s 0.4s infinite ease-in-out; animation: tin 8s 0.4s infinite ease-in-out; } .cup:nth-child(3) { -webkit-animation: cupC 8s infinite ease-in-out; animation: cupC 8s infinite ease-in-out; } .cup:nth-child(3) .shadow { -webkit-animation: shadow 8s 0.8s infinite ease-in-out; animation: shadow 8s 0.8s infinite ease-in-out; } .cup:nth-child(3) .ball_shadow { -webkit-animation: ball 32s -8s infinite ease-in-out; animation: ball 32s -8s infinite ease-in-out; } .cup:nth-child(3) .ball { -webkit-animation: ball 32s -8s infinite ease-in-out; animation: ball 32s -8s infinite ease-in-out; } .cup:nth-child(3) .tin { -webkit-animation: tin 8s 0.8s infinite ease-in-out; animation: tin 8s 0.8s infinite ease-in-out; } @-webkit-keyframes cupA { 0%, 45%, 80% { left: 0; } 55%, 90% { left: 50%; } 65%, 100% { left: 100%; } 60%, 85% { -webkit-transform: translateX(-50%) scale(0.909); transform: translateX(-50%) scale(0.909); z-index: 0; } 0%, 45%, 55%, 65%, 80%, 90%, 100% { -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); z-index: 5; } 50%, 95% { -webkit-transform: translateX(-50%) scale(1.1); transform: translateX(-50%) scale(1.1); z-index: 10; } 72.5% { -webkit-transform: translateX(-50%) scale(1.21); transform: translateX(-50%) scale(1.21); z-index: 10; } } @keyframes cupA { 0%, 45%, 80% { left: 0; } 55%, 90% { left: 50%; } 65%, 100% { left: 100%; } 60%, 85% { -webkit-transform: translateX(-50%) scale(0.909); transform: translateX(-50%) scale(0.909); z-index: 0; } 0%, 45%, 55%, 65%, 80%, 90%, 100% { -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); z-index: 5; } 50%, 95% { -webkit-transform: translateX(-50%) scale(1.1); transform: translateX(-50%) scale(1.1); z-index: 10; } 72.5% { -webkit-transform: translateX(-50%) scale(1.21); transform: translateX(-50%) scale(1.21); z-index: 10; } } @-webkit-keyframes cupB { 55%, 65% { left: 0%; } 0%, 45%, 100% { left: 50%; } 80%, 90% { left: 100%; } 72.5% { -webkit-transform: translateX(-50%) scale(0.826); transform: translateX(-50%) scale(0.826); z-index: 0; } 50%, 95% { -webkit-transform: translateX(-50%) scale(0.909); transform: translateX(-50%) scale(0.909); z-index: 0; } 0%, 45%, 55%, 65%, 80%, 90%, 100% { -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); z-index: 5; } } @keyframes cupB { 55%, 65% { left: 0%; } 0%, 45%, 100% { left: 50%; } 80%, 90% { left: 100%; } 72.5% { -webkit-transform: translateX(-50%) scale(0.826); transform: translateX(-50%) scale(0.826); z-index: 0; } 50%, 95% { -webkit-transform: tra.........完整代码请登录后点击上方下载按钮下载查看
网友评论0