Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Send
Sent
css
.button { --primary: #275EFE; --primary-dark: #2055EE; --primary-darkest: #133FC0; --text: #FFFFFF; --text-opacity: 1; --success: #2B3044; --success-scale: .2; --success-opacity: 0; --border-radius: 7; --overflow: hidden; --rotate: 0; --plane-x: 0; --plane-y: 0; --plane-opacity: 1; --left-wing-background: var(--primary); --left-wing-first-x: 0; --left-wing-first-y: 0; --left-wing-second-x: 50; --left-wing-second-y: 0; --left-wing-third-x: 0; --left-wing-third-y: 100; --left-body-background: var(--primary); --left-body-first-x: 50; --left-body-first-y: 0; --left-body-second-x: 50; --left-body-second-y: 100; --left-body-third-x: 0; --left-body-third-y: 100; --right-wing-background: var(--primary); --right-wing-first-x: 50; --right-wing-first-y: 0; --right-wing-second-x: 100; --right-wing-second-y: 0; --right-wing-third-x: 100; --right-wing-third-y: 100; --right-body-background: var(--primary); --right-body-first-x: 50; --right-body-first-y: 0; --right-body-second-x: 50; --right-body-second-y: 100; --right-body-third-x: 100; --right-body-third-y: 100; display: block; cursor: pointer; position: relative; border: 0; padding: 8px 0; min-width: 100px; text-align: center; margin: 0; line-height: 24px; font-family: inherit; font-weight: 500; font-size: 14px; background: none; outline: none; color: var(--text); -webkit-transform: rotate(calc(var(--rotate) * 1deg)) translateZ(0); transform: rotate(calc(var(--rotate) * 1deg)) translateZ(0); -webkit-appearance: none; -webkit-tap-highlight-color: transparent; } .button .left, .button .right { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: var(--plane-opacity); -webkit-transform: translate(calc(var(--plane-x) * 1px), calc(var(--plane-y) * 1px)) translateZ(0); transform: translate(calc(var(--plane-x) * 1px), calc(var(--plane-y) * 1px)) translateZ(0); } .button .left:before, .button .left:after, .button .right:before, .button .right:after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: calc(var(--border-radius) * 1px); -webkit-transform: translate(var(--x, 0.4%), var(--y, 0)) translateZ(0); transform: translate(var(--x, 0.4%), var(--y, 0)) translateZ(0); z-index: var(--z-index, 2); background: var(--background, var(--left-wing-background)); -webkit-clip-path: polygon(calc(var(--first-x, var(--left-wing-first-x)) * 1%) calc(var(--first-y, var(--left-wing-first-y)) * 1%), calc(var(--second-x, var(--left-wing-second-x)) * 1%) calc(var(--second-y, var(--left-wing-second-y)) * 1%), calc(var(--third-x, var(--left-wing-third-x)) * 1%) calc(var(--third-y, var(--left-wing-third-y)) * 1%)); clip-path: polygon(calc(var(--first-x, var(--left-wing-first-x)) * 1%) calc(var(--first-y, var(--left-wing-first-y)) * 1%), calc(var(--second-x, var(--left-wing-second-x)) * 1%) calc(var(--second-y, var(--left-wing-second-y)) * 1%), calc(var(--third-x, var(--left-wing-third-x)) * 1%) calc(var(--third-y, var(--left-wing-third-y)) * 1%)); } .button .left:after { --x: 0; --z-index: 1; --background: var(--left-body-background); --first-x: var(--left-body-first-x); --first-y: var(--left-body-first-y); --second-x: var(--left-body-second-x); --second-y: var(--left-body-second-y); --third-x: var(--left-body-third-x); --third-y: var(--left-body-third-y); } .button .right:before { --x: -.4%; --z-index: 2; --background: var(--right-wing-background); --first-x: var(--right-wing-first-x); --first-y: var(--right-wing-first-y); --second-x: var(--right-wing-second-x); --second-y: var(--right-wing-second-y); --third-x: var(--right-wing-third-x); --third-y: var(--right-wing-third-y); } .button .right:after { --x: 0; --z-index: 1; --background: var(--right-body-background); --first-x: var(--right-body-first-x); --first-y: var(--right-body-first-y); --second-x: var(--right-body-second-x); --second-y: var(--right-body-second-y); --third-x: var(--right-body-third-x); --third-y: var(--right-body-third-y); } .button span { display: block; position: relative; z-index: 4; opacity: var(--text-opacity); } .button span.success { z-index: 0; position: absolute; left: 0; right: 0; top: 8px; -webkit-transform: rotate(calc(var(--rotate) * -1deg)) scale(var(--success-scale)) translateZ(0); transform: rotate(calc(var(--rotate) * -1deg)) scale(var(--success-scale)) translateZ(0); opacity: var(--success-opacity); color: var(--success); } html { box-sizing: border-box; -webkit-font-smoothing: antialiased; } * { box-sizing: inherit; } *:before, *:after { box-sizing: inherit; } body { min-height: 100vh; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; font-family: 'Inter', Arial; background: #E1E6F9; }
JavaScript
document.querySelectorAll('.button').forEach(button => { let getVar = variable => getComputedStyle(button).getPropertyValue(variable); button.addEventListener('click', e => { if(!button.classList.contains('active')) { button.classList.add('active'); gsap.to(button, { keyframes: [{ '--left-wing-first-x': 50, '--left-wing-first-y': 100, '--right-wing-second-x': 50, '--right-wing-second-y': 100, duration: .2, onComplete() { gsap.set(button, { '--left-wing-first-y': 0, '--left-wing-second-x': 40, '--left-wing-second-y': 100, '--left-wing-third-x': 0, '--left-wing-third-y': 100, '--left-body-third-x': 40, '--right-wing-first-x': 50, '--right-wing-first-y': 0, '--right-wing-second-x': 60, '--right-wing-second-y': 100, '--right-wing-third-x': 100, '--right-wing-third-y': 100, '--right-body-third-x': 60 }) } }, { '--left-wing-third-x': 20, '--left-wing-third-y': 90, '--left-wing-second-y': 90, '--left-body-third-y': 90, '--right-wing-third-x': 80, '--right-wing-third-y': 90, '--right-body-third-y': 90, '--right-wing-second-y': 90, duration: .2 }, { '--rotate': 50, '--left-wing-third-y': 95, '--left-wing-third-x': 27, '--right-body-third-x': 45, '--right-wing-second-x': 45, '--right-wing-third-x': 60, '--right-wing-third-y': 83, duration: .25 }, { '--rotate': 55, '--plane-x': -8, '--plane-y': 24, duration: .2 }, { '--rotate': 40, '--plane-x': 45, '--plane-y': -180, '--plane-opacity': 0, duration: .3, onComplete() { setTimeout(() => { button.removeAttribute('style'); gsap.fromTo(button, { opacity: 0, y: -8 }, { opacity: 1, y: 0, clearProps: true, duration: .3, onComplete() { button.classList.remove('active'); } }) }, 2000) } }] }) gsap.to(button, { keyframes: [{ '--text-opacity': 0, '--border-radius': 0, '--left-wing-background': getVar('--primary-darkest'), '--right-wing-background': getVar('--primary-darkest'), duration: .1 }, { '--left-wing-background': getVar('--primary'), '--right-wing-background': getVar('--primary'), duration: .1 }, { '--left-body-background': getVar('--primary-dark'), '--right-body-background': getVar('--primary-darkest'), duration: .4 }, { '--success-opacity': 1, '--success-scale': 1, duration: .25, delay: .25 }] }) } }) });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>纸飞机按钮-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号