帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 鼠标悬停抖动
鼠标悬停抖动
浏览:919次
-
评论:0次
-
发布时间:2017-08-29
Html
Css
Js
代码1
|
¥18.00
开通会员
免费使用
购买
代码2
|
¥18.00
开通会员
免费使用
购买
/*reset css*/ body,button,input,select,textarea { font:12px/1.125 Arial,Helvetica,sans-serif; _font-family:"SimSun"; } h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr { margin:0; padding:0; } body { background:#f4f4f4; } table { border-collapse:collapse; border-spacing:0; } li { list-style:none; } fieldset,img { border:0; } q:before,q:after { content:''; } a:focus,input,textarea { outline-style:none; } input[type="text"],input[type="password"],textarea { outline-style:none; -webkit-appearance:none; } textarea { resize:none; } address,caption,cite,code,dfn,em,i,th,var,b { font-style:normal; font-weight:normal; } abbr,acronym { border:0; font-variant:normal; } a { text-decoration:none; } a:hover { text-decoration:underline; } a { color:#0a8cd2; text-decoration:none; } a:hover { text-decoration:underline; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } .clearfix { display:block; } .clear { clear:both; height:0; font:0/0 Arial; visibility:hidden; } .left { float:left; } .right { float:right; } .buybtn { border-width:1px; border-style:solid; border-color:#FF9B01; background-color:#FFA00A; color:white; border-radius:2px; display:inline-block; overflow:hidden; vertical-align:middle; cursor:pointer; } .buybtn:hover { text-decoration:none; background:#FFB847; background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,184,71,1)),color-stop(100%,rgba(255,162,16,1))); } .buybtn span { border-color:#FFB33B; padding:0 9px 0 10px; white-space:nowrap; display:inline-block; border-style:solid; border-width:1px; border-radius:2px; height:18px; line-height:17px; vertical-align:middle; } /*main css*/ .kuzhan-list { width:700px; margin:20px auto; } .kuzhan-list .dressing { float:left; _display:inline; margin:8px; margin-top:15px; } .kuzhan-list .dressing_wrap,.kuzhan-list .dressing_wrapB { position:relative; _zoom:1; border-radius:2px; background:#F1F1F1; border-style:solid; border-width:1px; } .kuzhan-list .skinimg { z-index:2; border-style:solid; border-width:2px; border-color:#fff; } .kuzhan-list .skinimg a { display:block; overflow:hidden; } .kuzhan-list .skinimg img { display:inline-block; } .kuzhan-list .skinimg .loading { border-radius:0; width:31px; height:31px; padding-left:97px; padding-top:59px; } .kuzhan-list .dressing_wrap { border-color:#d8d8d8; -webkit-box-shadow:0 3px 6px -4px rgba(0,0,0,1); box-shadow:0 3px 6px -4px rgba(0,0,0,1); background:#FFF; border:1px solid #c4c4c4; border-radius:2px; -webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.21); box-shadow:0 0 5px 0 rgba(0,0,0,.21); } .kuzhan-list .information_area { margin-bottom:11px; } .kuzhan-list .information_area_wrap { margin:auto; position:relative; } .kuzhan-list .item,.kuzhan-list .tipinfo { padding:3px 10px 0 10px; } .kuzhan-list .information_area h4,.kuzhan-list .W_vline,.kuzhan-list .price { margin-top:6px; } .kuzhan-list .information_area h4 a { cursor:default; } .kuzhan-list .price { color:#333; } .kuzhan-list .price a:hover { text-decoration:underline; } .kuzhan-list .op a { color:#0989d1; } .kuzhan-list .W_vline { color:#999; margin-right:8px; margin-left:10px; } .kuzhan-list .t_open { margin-top:5px; } .kuzhan-list .price { color:#f80; font:normal 12px/normal 'microsoft yahei'; } .kuzhan-list .skinimg img:hover { -webkit-animation:tada 1s .2s ease both; -moz-animation:tada 1s .2s ease both; } @-webkit-keyframes tada { 0% { -webkit-transform:scale(1); } 10%,20% { -webkit-transform:scale(0.9) rotate(-3deg); } 30%,50%,70%,90% { -webkit-transform:scale(1.1) rotate(3deg); } 40%,60%,80% { -webkit-transform:scale(1.1) rotate(-3deg); } 100% { -webkit-transform:scale(1) rotate(0); } }@-moz-keyframes tada { 0% { -moz-transform:scale(1); } 10%,20% { -moz-transform:scale(0.9) rotate(-3deg); } 30%,50%,70%,90% { -moz-transform:scale(1.1) rotate(3deg); } 40%,60%,80% { -moz-transform:scale(1.1) rotate(-3deg); } 100% { -moz-transform:scale(1) rotate(0); } }.kuzhan-list .dressing_hover .information_area { -webkit-animation:flipInY 300ms .1s ease both; -moz-animation:flipInY 300ms .1s ease both; } @-webkit-keyframes flipInY { 0% { -webkit-transform:perspective(400px) rotateY(90deg); opacity:0; } 40% { -webkit-transform:perspective(400px) rotateY(-10deg); } 70% { -webkit-transform:perspective(400px) rotateY(10deg); } 100% { -webkit-transform:perspective(400px) rotateY(0deg); opacity:1; } }@-moz-keyframes flipInY { 0% { -moz-transform:perspective(400px) rotateY(90deg); opacity:0; } 40% { -moz-transform:perspective(400px) rotateY(-10deg); } 70% { -moz-transform:perspective(400px) rotateY(10deg); } 100% { -moz-transform:perspective(400px) rotateY(0deg); opacity:1; } }
↑上面代码改变,会自动显示代码结果
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特效,鼠标悬停抖动效果
jQuery跟随提示信息
简易五子棋游戏
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
919
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值