帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 非常好看的按键样式
非常好看的按键样式
浏览:1651次
-
评论:0次
-
发布时间:2018-10-09
Html
Css
Js
Button
Button
Button
Button
Button
Button
Button
* { padding:0; margin:0 auto; } body,html { height:100%; display:flex; justify-content:center; align-items:center; background:rgb(73,73,73); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif; } main { width:150px; height:550px; /* border:1px solid black; */ transform:scale(0.8); } #button { width:100%; height:60px; cursor:pointer; position:relative; color:white; text-align:center; line-height:60px; font-size:25px; margin-bottom:20px; transition:0.5s; top:0; } #button a { width:100%; height:100%; display:block; position:relative; z-index:5; color:white; text-decoration:none; transition:0.2s; top:0; } .one::before { content:''; width:100%; height:60px; position:absolute; left:0; transition:0.5s; background:rgb(93,131,243); z-index:1; } .one:hover:before { filter:blur(15px); } .one:hover a { transform:scale(1.1); text-shadow:0 0 10px white; } .two::before { content:''; width:100%; height:60px; background:rgb(93,243,198); position:absolute; left:0; } @keyframes move { 0% { box-shadow:0px 0 0 rgb(93,243,198),0px 0 0 rgb(93,243,198),0px 0 0 rgb(93,243,198),0px 0 0 rgb(93,243,198),0px 0 0 rgb(93,243,198); } 50% { box-shadow:-1px -1px 0 rgb(93,243,198),-2px -2px 0 rgb(93,243,198),-3px -3px 0 rgb(93,243,198),-4px -4px 0 rgb(93,243,198),-5px -5px 0 rgb(93,243,198); } 100% { box-shadow:1px 1px 0 rgb(93,243,198),2px 2px 0 rgb(93,243,198),3px 3px 0 rgb(93,243,198),4px 4px 0 rgb(93,243,198),5px 5px 0 rgb(93,243,198); } }@keyframes moves { 0% { left:0; top:0; } 50% { left:-5px; top:-5px; transform:scale(1.2) } 100% { left:5px; top:5px; transform:scale(0.9) } }.two:hover::before { animation:move 0.4s ease 2 alternate; } .two:hover a { animation:moves 0.4s ease 2 alternate; } .three::before { content:''; width:100%; height:60px; background:rgba(255,255,255,0.748); position:absolute; left:0; } @keyframes move3 { 0% { text-shadow:0px 0px 0 rgb(46,46,46),0px 0px 0 rgb(46,46,46),0px 0px 0 rgb(46,46,46),0px 0px 0 rgb(46,46,46),0px 0px 0 rgb(46,46,46); } 50% { text-shadow:5px 5px 5px rgb(46,46,46),15px 10px 5px rgb(46,46,46),25px 15px 5px rgb(46,46,46),35px 20px 5px rgb(46,46,46),45px 25px 5px rgb(46,46,46); } 100% { text-shadow:-5px -5px 5px rgb(46,46,46),-15px -10px 5px rgb(46,46,46),-25px -15px 5px rgb(46,46,46),-35px -20px 5px rgb(46,46,46),-45px -25px 5px rgb(46,46,46); } }@keyframes moves3 { 0% { left:0; top:0; } 50% { left:25px; top:15px; filter:blur(10px); } 100% { left:-25px; top:-15px; filter:blur(10px); } }.three:hover { animation:move3 0.4s ease 2 alternate; } .three:hover::before { animation:moves3 0.5s linear 2 alternate; } .four { overflow:hidden; background:rgb(243,171,93); } .four::before { content:'Button'; width:100%; height:60px; position:absolute; left:0; top:-3px; transform:scale(2); z-index:1; color:rgb(42,42,42); opacity:0; transition:0.5s; } .four::after { content:'Button'; width:100%; height:60px; position:absolute; left:0; top:-3px; transform:scale(2); z-index:1; color:black; opacity:0; transition:0.5s; } .four:hover::before { transition-delay:0.2s; opacity:1; top:0; transform:scale(1); } .four:hover::after { opacity:1; top:0; transform:scale(1); } .five a { background:rgb(243,93,93); } .five::before { content:''; width:5px; height:5px; border-radius:50%; position:absolute; left:0; top:25px; transition:0.5s ease; opacity:1; box-shadow:0px 0 0px red,0px -25px 0px red,0px 30px 0px red,0px -9px 0px red; } .five::after { content:''; width:5px; height:5px; border-radius:50%; position:absolute; right:0; top:25px; transition:0.5s ease; opacity:1; box-shadow:0px 0 0px red,0px -15px 0px red,0px 25px 0px red,0px -9px 0px red; } .five:hover::before { opacity:1; transform:translateX(-30px); box-shadow:10px 0 2px red,-20px -30px 7px red,-15px 30px 5px red,-8px -9px 5px red; } .five:hover::after { opacity:1; transform:translateX(30px); box-shadow:-5px 0 2px red,20px -15px 7px red,10px 25px 5px red,8px -9px 5px red; } .five:hover a { background:none; box-shadow:0 0 50px rgba(253,77,77,0.857) inset; } .six a { background:rgb(214,231,99); } .six::before { content:''; width:100%; height:60px; position:absolute; left:0; transition:0.5s; opacity:0; box-shadow:0px 0 0px rgb(214,231,99),0px 0 0px rgb(214,231,99),0px 0 0px rgb(214,231,99),0px 0 0px rgb(214,231,99),0px 0 0px rgb(214,231,99); } .six::after { content:''; width:100%; height:60px; position:absolute; top:0; right:0; transition:0.5s; opacity:0; box-shadow:0px 0 0px rgb(214,231,99),0px 0 0px rgb(214,231,99),0px 0 0px rgb(214,231,99),0px 0 0px rgb(214,231,99),0px 0 0px rgb(214,231,99); } .six:hover::before { opacity:0.5; box-shadow:-5px 0 5px rgb(121,127,80),-15px 0 5px rgb(170,182,93),-25px 0 5px rgb(171,182,99),-35px 0 5px rgb(217,225,165),-45px 0 5px rgb(227,230,213); } .six:hover::after { opacity:0.5; box-shadow:5px 0 5px rgb(121,127,80),15px 0 5px rgb(170,182,93),25px 0 5px rgb(171,182,99),35px 0 5px rgb(217,225,165),45px 0 5px rgb(227,230,213); } .six:hover a { filter:blur(1px) } .seven { }.seven::before { content:''; width:100%; height:100%; position:absolute; left:0; background:rgb(132,133,132); } .seven::after { content:''; width:100%; height:100%; position:absolute; left:0; top:0; opacity:0.7; background:rgb(141,233,116); } .seven a { }@keyframes move7 { 0% { text-shadow:0px 0px 0px black,0px 0px 0px black,0px 0 0px black,0px 0 0px black; } 50% { text-shadow:0px 0px 2px black,5px 0px 2px black,10px 0 2px black,15px 0 2px black; } 100% { text-shadow:0px 0px 2px black,-5px 0px 2px black,-10px 0 2px black,-15px 0 2px black; } }@keyframes moves7 { 0% { transform:translateX(0); } 50% { filter:blur(5px); transform:translateX(10px); } 100% { transform:translateX(-10px); filter:blur(5px); } }.seven:hover a { animation:move7 0.2s linear 2 alternate; } .seven:hover::before { animation:moves7 0.15s linear 2 alternate; } .seven:hover::after { animation:moves7 0.15s linear 2 alternate-reverse; }
↑上面代码改变,会自动显示代码结果
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会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:CSS实现按键动画特效
主要用到了css里面的box-shadow:属性,还有filter滤镜效果
jQuery图片轮播插件
表格列表全选,及选中当前行数据变色
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1651
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值