帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 按钮点击气泡效果
按钮点击气泡效果
浏览:1263次
-
评论:1次
-
发布时间:2018-08-23
Html
Css
Js
点击气泡动画
body { font-size:16px; font-family:'Helvetica','Arial',sans-serif; text-align:center; background-color:#f8faff; } .bubbly-button { font-family:'Helvetica','Arial',sans-serif; display:inline-block; font-size:1em; padding:1em 2em; margin-top:100px; margin-bottom:60px; -webkit-appearance:none; appearance:none; background-color:#ff3de8; color:#fff; border-radius:4px; border:none; cursor:pointer; position:relative; transition:transform ease-in 0.1s,box-shadow ease-in 0.25s; box-shadow:0 2px 15px rgba(255,0,251,0.5); } .bubbly-button:focus { outline:0; } .bubbly-button:before,.bubbly-button:after { position:absolute; content:''; display:block; width:140%; height:100%; left:-20%; z-index:-1000; transition:all ease-in-out 0.5s; background-repeat:no-repeat; } .bubbly-button:before { display:none; top:-75%; background-image:radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,transparent 20%,#ff0081 20%,transparent 30%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,transparent 10%,#ff0081 15%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%); background-size:10% 10%,20% 20%,15% 15%,20% 20%,18% 18%,10% 10%,15% 15%,10% 10%,18% 18%; } .bubbly-button:after { display:none; bottom:-75%; background-image:radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,transparent 10%,#ff0081 15%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%); background-size:15% 15%,20% 20%,18% 18%,20% 20%,15% 15%,10% 10%,20% 20%; } .bubbly-button:active { transform:scale(0.9); background-color:#e60074; box-shadow:0 2px 25px rgba(255,0,130,0.2); } .bubbly-button.animate:before { display:block; animation:topBubbles ease-in-out 0.75s forwards; } .bubbly-button.animate:after { display:block; animation:bottomBubbles ease-in-out 0.75s forwards; } @keyframes topBubbles { 0% { background-position:5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%; } 50% { background-position:0% 80%,0% 20%,10% 40%,20% 0%,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%; } 100% { background-position:0% 70%,0% 10%,10% 30%,20% -10%,30% 20%,22% 40%,50% 40%,65% 10%,90% 20%; background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%; } }@keyframes bottomBubbles { 0% { background-position:10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0%; } 50% { background-position:0% 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0%; } 100% { background-position:0% 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%; background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%; } }
var animateButton = function(e) { e.preventDefault; // reset animation 复位动画 e.target.classList.remove('animate'); e.target.classList.add('animate'); setTimeout(function() { e.target.classList.remove('animate'); }, 700); }; var btn = document.getElementsByClassName("bubbly-button"); for (var i = 0; i < btn.length; i++) { btn[i].addEventListener('click', animateButton, false); }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>按钮点击气泡效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:css3的animation,伪元素
利用css3的animation、background-image、background-size属性,伪元素,再js控制类名渲染动画
汉堡菜单效果
心形,我心飞扬动画效果
讨论这个常用代码(1)
回答他人问题或分享心得会奖励牛币
Lv3 码奴
中***D
2018年08月24日
攒分,mark777
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1263
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值