Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Download
css
body { font-family:'Poppins'; } .download-button { position:fixed; margin:auto; top:0; left:0; right:0; bottom:0; width:120px; height:120px; background:#5757ff; border-radius:5px; -webkit-box-shadow:0 10px 20px rgba(0,0,0,0.2); box-shadow:0 10px 20px rgba(0,0,0,0.2); -webkit-transition:250ms -webkit-transform, 250ms -webkit-box-shadow; transition:250ms -webkit-transform, 250ms -webkit-box-shadow; transition:250ms transform, 250ms box-shadow; transition:250ms transform, 250ms box-shadow, 250ms -webkit-transform, 250ms -webkit-box-shadow; cursor:pointer; } .download-button:hover { -webkit-transform:scale(0.95); transform:scale(0.95); -webkit-box-shadow:0 4px 8px rgba(0,0,0,0.1); box-shadow:0 4px 8px rgba(0,0,0,0.1); } .download-button_icon { position:absolute; margin:auto; top:10px; left:0; right:0; width:80px; height:80px; } .download-button_icon span { position:absolute; margin:auto; top:0; left:0; right:0; bottom:0; width:4px; height:50px; background:#fff; border-radius:4px; content:''; } .download-button_icon span:nth-child(2), .download-button_icon span:nth-child(3) { top:35px; height:25px; left:16px; -webkit-transform:rotate(45deg); transform:rotate(45deg); } .download-button_icon span:nth-child(3) { left:-16px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); } .download-button_text { position:absolute; left:0; right:0; bottom:0; color:#fff; text-align:center; font-size:1em; font-weight:700; padding:15px 0; } .files { position:relative; margin-top:130px; text-align:center; } .files .file { width:15px; fill:#5757ff; -webkit-animation:800ms fallingFile infinite ease-in; animation:800ms fallingFile infinite ease-in; } @-webkit-keyframes fallingFile { 0%{opacity:0;-webkit-transform:translate3d(0,-40px,0) rotate(0deg);transform:translate3d(0,-40px,0) rotate(0deg);} 60%{opacity:1;} 100%{opacity:0;-webkit-transform:translate3d(0,120px,0) rotate(90deg);transform:translate3d(0,120px,0) rotate(90deg);} } @keyframes fallingFile { 0%{opacity:0;-webkit-transform:translate3d(0,-40px,0) rotate(0deg);transform:translate3d(0,-40px,0) rotate(0deg);} 60%{opacity:1;} 100%{opacity:0;-webkit-transform:translate3d(0,120px,0) rotate(90deg);transform:translate3d(0,120px,0) rotate(90deg);} } .fade-enter-active, .fade-leave-active { -webkit-transition: opacity .5s; transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; }
JavaScript
(function(){ var app = new Vue({ el: '#app', data: { download: false }, methods: { fileStyles: function() { let delay = -(Math.floor(Math.random() * 10) * 254); let duration = (Math.floor(Math.random() * 11) + 9) * 100; return { 'animation-delay' : delay + 'ms', 'animation-duration' : duration + 'ms' } } }, mounted() { } }); })();
粒子
时间
文字
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号