垃圾桶装入垃圾删除动画按钮效果
代码语言: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: 9.........完整代码请登录后点击上方下载按钮下载查看
网友评论0