垃圾桶装入垃圾删除动画按钮效果
代码语言:html
所属分类:动画
代码描述:垃圾桶装入垃圾删除动画按钮效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inter:400,500,600,700&display=swap'> <style> .button { --background: #362A89; --background-hover: #291F6E; --text: #fff; --icon: #fff; display: -webkit-box; display: flex; outline: none; cursor: pointer; border: 0; min-width: 113px; padding: 9px 20px 9px 12px; border-radius: 11px; line-height: 24px; font-family: inherit; font-weight: 600; font-size: 14px; overflow: hidden; color: var(--text); background: var(--b, var(--background)); -webkit-transition: background .4s, -webkit-transform .3s; transition: background .4s, -webkit-transform .3s; transition: transform .3s, background .4s; transition: transform .3s, background .4s, -webkit-transform .3s; -webkit-transform: scale(var(--scale,1)) translateZ(0); transform: scale(var(--scale,1)) translateZ(0); -webkit-appearance: none; -webkit-tap-highlight-color: transparent; -webkit-mask-image: -webkit-radial-gradient(white, black); } .button:active { --scale: .95; } .button:hover { --b: var(--background-hover); } .button .icon, .button span { display: inline-block; vertical-align: top; -webkit-transform: translateZ(0); transform: translateZ(0); } .button .icon { width: 24px; height: 24px; position: relative; z-index: 1; margin-right: 8px; color: var(--text); } .button .icon svg { width: 96px; height: 96px; display: block; position: absolute; left: -36px; top: -36px; will-change: transform; fill: var(--icon); -webkit-transform: scale(0.254) translateZ(0); transform: scale(0.254) translateZ(0); -webkit-animation: var(--name, var(--name-top, none)) 2200ms ease forwards; animation: var(--name, var(--name-top, none)) 2200ms ease forwards; } .button .icon svg.bottom { --name: var(--name-bottom,none); } .button span { -webkit-animation: var(--name-text, none) 2200ms ease forwards; animation: var(--name-text, none) 2200ms ease forwards; } .button.delete { --name-top: trash-top; --name-bottom: trash-bottom; --name-text: text; } @-webkit-keyframes trash-bottom { 25%, 32% { -webkit-transform: translate(32px, 19px) scale(1) translateZ(0); transform: translate(32px, 19px) scale(1) translateZ(0); } 70%, 80% { -webkit-transform: translate(32px, 0) scale(0.254) translateZ(0); transform: translate(32px, 0) scale(0.254) translateZ(0); } 100% { -webkit-transform: scale(0.254) translateZ(0); transform: scale(0.254) translateZ(0); } } @keyframes trash-bottom { 25%, 32% { -webkit-transform: translate(32px, 19px) scale(1) translateZ(0); transform: translate(32px, 19px) scale(1) translateZ(0); } 70%, 80% { -webkit-transform: translate(32px, 0) scale(0.254) translateZ(0); transform: translate(32px, 0) scale(0.254) translateZ(0); } 100% { -webkit-transform: scale(0.254) translateZ(0); transform: scale(0.254) translateZ(0); } } @-webkit-keyframes trash-top { 25%, 32% { -webkit-transform: translate(38px, 4px) scale(1) rotate(-20deg) translateZ(0); transform: translate(38px, 4px) scale(1) rotate(-20deg) translateZ(0); } 70%, 80% { -webkit-transform: translate(32px, 0) scale(0.254) translateZ(0); transform: translate(32px, 0) scale(0.254) translateZ(0); } 100% { -webkit-transform: scale(0.254) translateZ(0); transform: scale(0.254) translateZ(0); } } @keyframes trash-top { 25%, 32% { -webkit-transform: translate(38px, 4px) scale(1) rotate(-20deg) translateZ(0); transform: translate(38px, 4px) scale(1) rotate(-20deg) translateZ(0); } 70%, 80% { -webkit-transform: translate(32px, 0) scale(0.254) translateZ(0); transform: translate(32px, 0) scale(0.254) translateZ(0); } 100% { -webkit-transform: scale(0.254) translateZ(0); transform: scale(0.254) translateZ(0); } } @-webkit-keyframes text { 25% { -webkit-transform: translate(-4px, -4px) rotate(-20deg) translateZ(0); transform: translate(-4px, -4px) rotate(-20deg) translateZ(0); } 70% { opacity: 1; -webkit-transform: translate(-12px, 48px) rotate(-80deg) scale(0.2) translateZ(0); transform: translate(-12px, 48px) rotate(-80deg) scale(0.2) translateZ(0); } 71% { opacity: 0; } 72%, 90% { opacity: 0; -webkit-transform: translateZ(0); transform: translateZ(0); } 100% { opacity: 1; } } @keyframes text { 25% { -webkit-transform: translate(-4px, -.........完整代码请登录后点击上方下载按钮下载查看
网友评论0