gsap点赞收藏按钮点击动画效果
代码语言:html
所属分类:表单美化
代码描述:gsap点赞收藏按钮点击动画效果
下面为部分代码预览,完整代码请点击下载或在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 { --color: #1E2235; --color-hover: #1E2235; --color-active: #fff; --icon: #BBC1E1; --icon-hover: #8A91B4; --icon-active: #fff; --background: #fff; --background-hover: #fff; --background-active: #362A89; --border: #E1E6F9; --border-active: #362A89; --shadow: rgba(0, 17, 119, 0.025); display: block; outline: none; cursor: pointer; position: relative; border: 0; background: none; padding: 8px 20px 8px 24px; border-radius: 9px; line-height: 27px; font-family: inherit; font-weight: 600; font-size: 14px; color: var(--color); -webkit-appearance: none; -webkit-tap-highlight-color: transparent; -webkit-transition: color .2s linear; transition: color .2s linear; } .button.dark { --color: #F6F8FF; --color-hover: #F6F8FF; --color-active: #fff; --icon: #8A91B4; --icon-hover: #BBC1E1; --icon-active: #fff; --background: #1E2235; --background-hover: #171827; --background-active: #275EFE; --border: transparent; --border-active: transparent; --shadow: rgba(0, 17, 119, 0.16); } .button:hover { --icon: var(--icon-hover); --color: var(--color-hover); --background: var(--background-hover); --border-width: 2px; } .button:active { --scale: .95; } .button:not(.liked):hover { --hand-rotate: 8; --hand-thumb-1: -12deg; --hand-thumb-2: 36deg; } .button.liked { --span-x: 2px; --span-d-o: 1; --span-d-x: 0; --icon: var(--icon-active); --color: var(--color-active); --border: var(--border-active); --background: var(--background-active); } .button:before { content: ''; min-width: 103px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit; -webkit-transition: background .2s linear, box-shadow .2s linear, -webkit-transform .2s; transition: background .2s linear, box-shadow .2s linear, -webkit-transform .2s; transition: background .2s linear, transform .2s, box-shadow .2s linear; transition: background .2s linear, transform .2s, box-shadow .2s linear, -webkit-transform .2s; -webkit-transform: scale(var(--scale, 1)) translateZ(0); transform: scale(var(--scale, 1)) translateZ(0); background: var(--background); box-shadow: inset 0 0 0 var(--border-width, 1px) var(--border), 0 4px 8px var(--shadow), 0 8px 20px var(--shadow); } .button .hand { width: 11px; height: 11px; border-radius: 2px 0 0 0; background: var(--icon); position: relative; margin: 10px 8px 0 0; -webkit-transform-origin: -5px -1px; transform-origin: -5px -1px; -webkit-transition: background .2s linear, -webkit-transform .25s; transition: background .2s linear, -webkit-transform .25s; transition: transform .25s, background .2s linear; transition: transform .25s, background .2s linear, -webkit-transform .25s; -webkit-transform: rotate(calc(var(--hand-rotate, 0) * 1deg)) translateZ(0); transform: rotate(calc(var(--hand-rotate, 0) * 1deg)) translateZ(0); } .button .hand:before, .button .hand:after { content: ''; background: var(--icon); position: absolute; -webkit-transition: background .2s linear, box-shadow .2s linear; transition: background .2s linear, box-shadow .2s linear; } .button .hand:before { left: -5px; bottom: 0; height: 12px; width: 4px; border-radius: 1px 1px 0 1px; } .button .hand:after { right: -3px; top: 0; width: 4px; height: 4px; border-radius: 0 2px 2px 0; background: var(--icon); box-shadow: -0.5px 4px 0 var(--icon), -1px 8px 0 var(--icon), -1.5px 12px 0 var(--icon); -webkit-transform: scaleY(0.6825); transform: scaleY(0.6825); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .button .hand .thumb { background: var(--icon); width: 10px; height: 4px; border-radius: 2px; -webkit-transform-origin: 2px 2px; transform-origin: 2px 2px; position: absolute; left: 0; top: 0; -webkit-transition: background .2s linear, -webkit-transform .25s; transition: background .2s linear, -webkit-transform .25s; transition: transform .25s, background .2s linear; transition: transform .25s, background .2s linear, -webkit-transform .25s; -webkit-transform: scale(0.85) translateY(-0.5px) rotate(var(--hand-thumb-1, -45deg)) translateZ(0); transform: scale(0.85) translateY(-0.5px) rotate(var(--hand-thumb-1, -45deg)) translateZ(0); } .button .hand .thumb:before { content: ''; height: 4px; width: 7px; border-radius: 2px; -webkit-transform-origin: 2px.........完整代码请登录后点击上方下载按钮下载查看
网友评论0