css跳跃跳动菜单UI动画效果代码
代码语言:html
所属分类:动画
代码描述:css跳跃跳动菜单UI动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { display: flex; align-items: center; justify-content: center; height: 100vh; background-color: snow; } .btn-toggle { position: relative; display: flex; flex-direction: column; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 12px; background-color: transparent; border-color: transparent; outline: none; transform: translateZ(0); transition: transform 0.1s ease-out; } .btn-toggle:active { transform: translateY(4px); } .btn-toggle:focus .line:after { background-color: black; } .line { display: block; width: 60px; padding: 3.75px; } .line:after { content: ""; display: block; width: 100%; height: 7.5px; background-color: dimgray; border-radius: 2px; transform: translateZ(0) rotate(0); transition: background-color 0.2s ease-out; } .open .line:nth-child(1) { -webkit-animation: jump-1 0.9s forwards ease; animation: jump-1 0.9s forwards ease; } .open .line:nth-child(1):after { -webkit-animation: line-1 0.9s forwards ease-in-out; animation: line-1 0.9s forwards ease-in-out; } .open .line:nth-child(2) { -webkit-animation: jump-2 0.9s forwards ease; animation: jump-2 0.9s forwards ease; } .open .line:nth-child(2):after { -webkit-animation: line-2 0.9s forwards ease-in-out; animation: line-2 0.9s forwards ease-in-out; } .close .line:nth-child(1) { animation: jump-1 0.9s reverse ease; } .close .line:nth-child(1):after { animation: line-1 0.9s reverse ease-in-out; } .close .line:nth-child(2) { animation: jump-2 0.9s reverse ease; } .close .line:nth-child(2):after { animation: line-2 0.9s reverse ease-in-out; } .open .line:nth-child(3), .close .line:nth-child(3) { -webkit-animation: jump-3 0.9s forwards ease-out; animation: jump-3 0.9s forwards ease-out; } @-webkit-keyframes line-1 { 10% { transform: translateZ(0) rotate(0); } 80% { transform: translateZ(0) rotate(395deg); } 90%, 100% { transform: translateZ(0) rotate(405deg); } } @keyframes line-1 { 10% { transform: translateZ(0) rotate(0); } 80% { transform: translateZ(0) rotate(395deg); } 90%, 100% { transform: translateZ(0) rotate(405deg); } } @-webkit-keyframes line-2 { 10% { transform: translateZ(0) rotate(0); } 20% { transform: translat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0