Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Button Animations You Probably Shouldn't Use
Wowzers
Kabang
Kerplow
Boinkers
Ohhh My
css
html { height: 100vh; min-height: 100vh; } html body { height: 100%; margin: 0; display: flex; } html body .bar { width: 20%; height: 100%; } html body .bar:nth-child(1) { background: #2b2d42; } html body .bar:nth-child(2) { background: #8d99ae; } html body .bar:nth-child(3) { background: #edf2f4; } html body .bar:nth-child(4) { background: #ef233c; } html body .bar:nth-child(5) { background: #d90429; } html body .container { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: #fff; width: 75rem; padding: 4rem; box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2); } html body .me { position: absolute; bottom: 2rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding: 2rem; background: white; box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2); } html body .me .fab { font-size: 1.75rem; margin: 0 1rem; color: #8d99ae; transition: 0.5s; } html body .me .fab:hover { color: #2b2d42; } html body .heading { text-align: center; } html body .heading h1 { color: #8d99ae; font-family: "Raleway", sans-serif; font-weight: 300; font-size: 2.5rem; } html body .buttons { display: flex; align-items: center; justify-content: center; } html body .buttons .btn { display: flex; align-items: center; justify-content: center; font-family: "Raleway", sans-serif; font-weight: 300; padding: 1rem 2rem; margin: 0 1rem; cursor: pointer; position: relative; overflow: hidden; } html body .buttons .btn:nth-child(1) { display: flex; align-items: center; justify-content: center; border: 2px solid #8d99ae; padding: 1rem 2rem 1rem 3rem; } html body .buttons .btn:nth-child(1) .circle { background-color: #8d99ae; height: 1rem; width: 1rem; border-radius: 100%; margin-right: 1rem; position: absolute; left: 1rem; z-index: -1; transition: 0.25s; } html body .buttons .btn:nth-child(1) .text { position: relative; left: 0; transition: 0.5s; } html body .buttons .btn:nth-child(1):hover { color: white; } html body .buttons .btn:nth-child(1):hover .circle { -webkit-transform: scale(25); transform: scale(25); } html body .buttons .btn:nth-child(1):hover .text { left: -0.5rem; } html body .buttons .btn:nth-child(2) { padding: 0; } html body .buttons .btn:nth-child(2) .text { border-top: 2px solid #8d99ae; border-bottom: 2px solid #8d99ae; padding: 1rem 2rem; position: relative; z-index: -1; transition: 0.25s; } html body .buttons .btn:nth-child(2):after, html body .buttons .btn:nth-child(2):before { content: ""; position: absolute; z-index: 2; height: 2px; width: 0; left: 50%; background-color: #2b2d42; transition: 0.25s; } html body .buttons .btn:nth-child(2):after { bottom: 0; } html body .buttons .btn:nth-child(2):before { top: 0; } html body .buttons .btn:nth-child(2):hover .text { border-color: transparent; } html body .buttons .btn:nth-child(2):hover:before, html body .buttons .btn:nth-child(2):hover:after { left: 0; width: 100%; } html body .buttons .btn:nth-child(3) .text { color: #8d99ae; transition: 0.5s; } html body .buttons .btn:nth-child(3):after, html body .buttons .btn:nth-child(3):before { content: ""; position: absolute; z-index: 2; height: 2px; width: 100%; left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); background-color: #2b2d42; transition: 0.5s; } html body .buttons .btn:nth-child(3):before { top: 0; } html body .buttons .btn:nth-child(3):after { bottom: 0; } html body .buttons .btn:nth-child(3):hover .text { color: #2b2d42; } html body .buttons .btn:nth-child(3):hover:before, html body .buttons .btn:nth-child(3):hover:after { -webkit-transform: translateX(100%); transform: translateX(100%); } html body .buttons .btn:nth-child(4) .text { transition: 0.5s; } html body .buttons .btn:nth-child(4) .left, html body .buttons .btn:nth-child(4) .right, html body .buttons .btn:nth-child(4):before, html body .buttons .btn:nth-child(4):after { position: absolute; left: 50%; top: 50%; height: 0; width: 0; background: #ef233c; transition: 0.5s; } html body .buttons .btn:nth-child(4):before, html body .buttons .btn:nth-child(4):after { content: ""; } html body .buttons .btn:nth-child(4):hover .text { color: #ef233c; } html body .buttons .btn:nth-child(4):hover .left, html body .buttons .btn:nth-child(4):hover .right { top: 0; width: 2px; height: 100%; } html body .buttons .btn:nth-child(4):hover .left { left: 0; } html body .buttons .btn:nth-child(4):hover .right { left: calc(100% - 2px); } html body .buttons .btn:nth-child(4):hover:before, html body .buttons .btn:nth-child(4):hover:after { height: 2px; width: 100%; left: 0; } html body .buttons .btn:nth-child(4):hover:before { top: 0; } html body .buttons .btn:nth-child(4):hover:after { top: calc(100% - 2px); } html body .buttons .btn:nth-child(5) .text { transition: 0.5s; } html body .buttons .btn:nth-child(5):before, html body .buttons .btn:nth-child(5):after { content: ""; position: absolute; z-index: -1; height: 0; width: 0; background: #d90429; top: 50%; left: 50%; border-radius: 100%; } html body .buttons .btn:nth-child(5):hover .text { color: white; } html body .buttons .btn:nth-child(5):hover:before, html body .buttons .btn:nth-child(5):hover:after { -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } html body .buttons .btn:nth-child(5):hover:before { -webkit-animation: 2s noway forwards; animation: 2s noway forwards; } html body .buttons .btn:nth-child(5):hover:after { -webkit-animation: 0.5s wow 2s forwards; animation: 0.5s wow 2s forwards; } @-webkit-keyframes wow { to { height: 20rem; width: 20rem; } } @keyframes wow { to { height: 20rem; width: 20rem; } } @-webkit-keyframes noway { to { height: 1rem; width: 1rem; } } @keyframes noway { to { height: 1rem; width: 1rem; } }
JavaScript
粒子
时间
文字
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号