Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Bubble hover effect
Simple button
Another button
A third button
A forth button
By Sammy Helali
css
body { font-family: 'Inconsolata', sans-serif; background: #2a364f; } h1{ text-align: center; color: rgba(255,255,255,0.8); } .credit{ text-align: center; color: rgba(255,255,255,0.4); } .content{ padding-top: 45px; padding-bottom: 20px; } .button_container{ width: 176px; margin: 0 auto; margin-top: 30px; padding-top: 40px; } .button_su{ overflow: hidden; position: relative; display: inline-block; border-radius: 3px; margin-bottom: 30px; } .su_button_circle{ background-color: red; border-radius: 1000px; position: absolute; left:0; top:0; width: 0px; height: 0px; margin-left: 0px; margin-top: 0px; pointer-events: none; /*animation-timing-function: ease-in-out; */ } .button_su_inner{ display: inline-block; background: #F8B627; color: #F4F4F4; font-size: 16px; font-weight: normal; width: 132px; text-align: center; border-radius: 3px; transition: 400ms; text-decoration: none; padding: 22px; z-index: 100000; } .button_text_container{ position:relative; z-index: 10000; } .explode-circle { animation: explode 0.5s forwards; } .desplode-circle{ animation: desplode 0.5s forwards; } @keyframes explode { 0% { width: 0px; height: 0px; margin-left: 0px; margin-top: 0px; background-color: rgba(42, 53, 80,0.2); } 100% { width: 400px; height: 400px; margin-left: -200px; margin-top: -200px; background-color: rgba(20, 180, 87,0.8); } } @keyframes desplode { 0% { width: 400px; height: 400px; margin-left: -200px; margin-top: -200px; background-color: rgba(20, 180, 87,0.8); } 100% { width: 0px; height: 0px; margin-left: 0px; margin-top: 0px; background-color: rgba(129, 80, 108,0.6); } }
JavaScript
$( ".button_su_inner" ).mouseenter(function(e) { var parentOffset = $(this).offset(); var relX = e.pageX - parentOffset.left; var relY = e.pageY - parentOffset.top; $(this).prev(".su_button_circle").css({"left": relX, "top": relY }); $(this).prev(".su_button_circle").removeClass("desplode-circle"); $(this).prev(".su_button_circle").addClass("explode-circle"); }); $( ".button_su_inner" ).mouseleave(function(e) { var parentOffset = $(this).offset(); var relX = e.pageX - parentOffset.left; var relY = e.pageY - parentOffset.top; $(this).prev(".su_button_circle").css({"left": relX, "top": relY }); $(this).prev(".su_button_circle").removeClass("explode-circle"); $(this).prev(".su_button_circle").addClass("desplode-circle"); });
粒子
时间
文字
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号