Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Hover me
css
body { background: #2d2d2d; } a { position: fixed; cursor: pointer; top: 50vh; left: 50%; color: white; transform: translate3d(-50%, -50%, 0); padding: 0.7em calc(0.7em * 1.2); display: inline-block; border: 3px solid transparent; position: relative; font-size: 1.5em; letter-spacing: 0.07em; } a .text { font-family: proxima-nova; transform: translate3d(0, 0.7em, 0); display: block; transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1) 0.4s; } a:after { position: absolute; content: ''; bottom: -3px; left: calc(0.7em * 1.2); right: calc(0.7em * 1.2); height: 3px; background: #f26522; z-index: -1; transition: transform 0.8s cubic-bezier(1, 0, 0.37, 1) 0.2s, right 0.2s cubic-bezier(0.04, 0.48, 0, 1) 0.6s, left 0.4s cubic-bezier(0.04, 0.48, 0, 1) 0.6s; transform-origin: left; } .line { position: absolute; background: #f26522; } .line.-right, .line.-left { width: 3px; bottom: -3px; top: -3px; transform: scale3d(1, 0, 1); } .line.-top, .line.-bottom { height: 3px; left: -3px; right: -3px; transform: scale3d(0, 1, 1); } .line.-right { right: -3px; transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.23s; transform-origin: top; } .line.-top { top: -3px; transition: transform 0.08s linear 0.43s; transform-origin: left; } .line.-left { left: -3px; transition: transform 0.08s linear 0.51s; transform-origin: bottom; } .line.-bottom { bottom: -3px; transition: transform 0.3s cubic-bezier(1, 0, 0.65, 1.01); transform-origin: right; } a:hover .text, a:active .text { transform: translate3d(0, 0, 0); transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1) 0.4s; } a:hover:after, a:active:after { transform: scale3d(0, 1, 1); right: -3px; left: -3px; transform-origin: right; transition: transform 0.2s cubic-bezier(1, 0, 0.65, 1.01) 0.17s, right 0.2s cubic-bezier(1, 0, 0.65, 1.01), left 0s 0.3s; } a:hover .line, a:active .line { transform: scale3d(1, 1, 1); } a:hover .line.-right, a:active .line.-right { transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.2s; transform-origin: bottom; } a:hover .line.-top, a:active .line.-top { transition: transform 0.08s linear 0.4s; transform-origin: right; } a:hover .line.-left, a:active .line.-left { transition: transform 0.08s linear 0.48s; transform-origin: top; } a:hover .line.-bottom, a:active .line.-bottom { transition: transform 0.5s cubic-bezier(0, 0.53, 0.29, 1) 0.56s; transform-origin: left; }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>按钮悬停CSS3-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号