Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Slinky Hover
css
body { text-align: center; font-size: 18px; padding-top: 10em; background-color: #cd4646; } .cta { background-color: #343434; display: inline-block; padding: 0.8em 3em 0.8em 3em; border-radius: 100px; font-family: "Raleway"; box-shadow: 0px 5px 40px rgba(52, 52, 52, 0.6); color: white; text-decoration: none; font-size: 1.2em; overflow: hidden; backface-visibility: hidden; position: relative; } .cta:active { transform: translateY(3px); } .btn-text-parent { position: relative; display: inline-block; overflow: hidden; } .wrap_text { display: inline-block; } .buildin-btn-text { position: absolute; left: 0; top: 0; z-index: 9; width: 100%; transform: translateY(100%); } .buildin-btn-text .btn-letter { opacity: 0; } .btn-letter { display: inline-block; margin: 0em 0.05em; position: relative; transition: transform 300ms, opacity 300ms ease; } .current-btn-text .btn-letter:nth-child(1) { transition-delay: 49ms; } .current-btn-text .btn-letter:nth-child(2) { transition-delay: 99ms; } .current-btn-text .btn-letter:nth-child(3) { transition-delay: 149ms; } .current-btn-text .btn-letter:nth-child(4) { transition-delay: 199ms; } .current-btn-text .btn-letter:nth-child(5) { transition-delay: 249ms; } .current-btn-text .btn-letter:nth-child(6) { transition-delay: 299ms; } .current-btn-text .btn-letter:nth-child(7) { transition-delay: 349ms; } .current-btn-text .btn-letter:nth-child(8) { transition-delay: 399ms; } .current-btn-text .btn-letter:nth-child(9) { transition-delay: 449ms; } .current-btn-text .btn-letter:nth-child(10) { transition-delay: 499ms; } .current-btn-text .btn-letter:nth-child(11) { transition-delay: 549ms; } .current-btn-text .btn-letter:nth-child(12) { transition-delay: 599ms; } .current-btn-text .btn-letter:nth-child(13) { transition-delay: 649ms; } .current-btn-text .btn-letter:nth-child(14) { transition-delay: 699ms; } .current-btn-text .btn-letter:nth-child(15) { transition-delay: 749ms; } .current-btn-text .btn-letter:nth-child(16) { transition-delay: 799ms; } .current-btn-text .btn-letter:nth-child(17) { transition-delay: 849ms; } .current-btn-text .btn-letter:nth-child(18) { transition-delay: 899ms; } .current-btn-text .btn-letter:nth-child(19) { transition-delay: 949ms; } .current-btn-text .btn-letter:nth-child(20) { transition-delay: 999ms; } .current-btn-text .btn-letter:nth-child(21) { transition-delay: 1049ms; } .current-btn-text .btn-letter:nth-child(22) { transition-delay: 1099ms; } .current-btn-text .btn-letter:nth-child(23) { transition-delay: 1149ms; } .current-btn-text .btn-letter:nth-child(24) { transition-delay: 1199ms; } .current-btn-text .btn-letter:nth-child(25) { transition-delay: 1249ms; } .current-btn-text .btn-letter:nth-child(26) { transition-delay: 1299ms; } .current-btn-text .btn-letter:nth-child(27) { transition-delay: 1349ms; } .current-btn-text .btn-letter:nth-child(28) { transition-delay: 1399ms; } .current-btn-text .btn-letter:nth-child(29) { transition-delay: 1449ms; } .current-btn-text .btn-letter:nth-child(30) { transition-delay: 1499ms; } .buildin-btn-text .btn-letter:nth-child(1) { opacity: 0; transition-delay: 49ms; } .buildin-btn-text .btn-letter:nth-child(2) { opacity: 0; transition-delay: 99ms; } .buildin-btn-text .btn-letter:nth-child(3) { opacity: 0; transition-delay: 149ms; } .buildin-btn-text .btn-letter:nth-child(4) { opacity: 0; transition-delay: 199ms; } .buildin-btn-text .btn-letter:nth-child(5) { opacity: 0; transition-delay: 249ms; } .buildin-btn-text .btn-letter:nth-child(6) { opacity: 0; transition-delay: 299ms; } .buildin-btn-text .btn-letter:nth-child(7) { opacity: 0; transition-delay: 349ms; } .buildin-btn-text .btn-letter:nth-child(8) { opacity: 0; transition-delay: 399ms; } .buildin-btn-text .btn-letter:nth-child(9) { opacity: 0; transition-delay: 449ms; } .buildin-btn-text .btn-letter:nth-child(10) { opacity: 0; transition-delay: 499ms; } .buildin-btn-text .btn-letter:nth-child(11) { opacity: 0; transition-delay: 549ms; } .buildin-btn-text .btn-letter:nth-child(12) { opacity: 0; transition-delay: 599ms; } .buildin-btn-text .btn-letter:nth-child(13) { opacity: 0; transition-delay: 649ms; } .buildin-btn-text .btn-letter:nth-child(14) { opacity: 0; transition-delay: 699ms; } .buildin-btn-text .btn-letter:nth-child(15) { opacity: 0; transition-delay: 749ms; } .buildin-btn-text .btn-letter:nth-child(16) { opacity: 0; transition-delay: 799ms; } .buildin-btn-text .btn-letter:nth-child(17) { opacity: 0; transition-delay: 849ms; } .buildin-btn-text .btn-letter:nth-child(18) { opacity: 0; transition-delay: 899ms; } .buildin-btn-text .btn-letter:nth-child(19) { opacity: 0; transition-delay: 949ms; } .buildin-btn-text .btn-letter:nth-child(20) { opacity: 0; transition-delay: 999ms; } .buildin-btn-text .btn-letter:nth-child(21) { opacity: 0; transition-delay: 1049ms; } .buildin-btn-text .btn-letter:nth-child(22) { opacity: 0; transition-delay: 1099ms; } .buildin-btn-text .btn-letter:nth-child(23) { opacity: 0; transition-delay: 1149ms; } .buildin-btn-text .btn-letter:nth-child(24) { opacity: 0; transition-delay: 1199ms; } .buildin-btn-text .btn-letter:nth-child(25) { opacity: 0; transition-delay: 1249ms; } .buildin-btn-text .btn-letter:nth-child(26) { opacity: 0; transition-delay: 1299ms; } .buildin-btn-text .btn-letter:nth-child(27) { opacity: 0; transition-delay: 1349ms; } .buildin-btn-text .btn-letter:nth-child(28) { opacity: 0; transition-delay: 1399ms; } .buildin-btn-text .btn-letter:nth-child(29) { opacity: 0; transition-delay: 1449ms; } .buildin-btn-text .btn-letter:nth-child(30) { opacity: 0; transition-delay: 1499ms; } .cta:hover .current-btn-text .btn-letter { opacity: 0; transform: translateY(-100%); } .cta:hover .buildin-btn-text .btn-letter { opacity: 1; transform: translateY(-100%); }
JavaScript
var $cta = $('.cta'); var createBtnsMarkup = function createBtnsMarkup() { $cta.each(function (i, btn) { var $t = $(btn); var $btnText = $t.text(); var $splitText = $btnText.split(""); $t.html("").append("\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t"); for (var _i = 0; _i < $splitText.length; _i++) { $t. find(".wrap_text"). append("
" + $splitText[_i] + "
"); } }); }; window.onLoad = createBtnsMarkup();
粒子
时间
文字
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号