discuz论坛网盘下载按钮（动画版）
测试下载（部分）：
夸克网盘百度网盘蓝奏网盘
打开界面=》编辑器设置=〉discuz！代码，新增一行代码，
复制下方代码粘贴到替换内容处，其他选项根据自己需要填写即可。
<style>
:root{--dur:2s;--arrowA:polygon(33% 0%,67% 0%,67% 60%,100% 60%,50% 100%,0% 60%,33% 60%);--arrowB:polygon(0% 37.5%,100% 37.5%,100% 62.5%,100% 62.5%,50% 62.5%,0% 62.5%,0% 62.5%);font-size:calc(20px + (40 - 20)*(100vw - 320px)/ (2560 - 320))}
button-hbd{background:#255ff4;border-radius:.2em;color:#fff;cursor:pointer;display:inline-flex;margin:10px;padding:.5em 1em;position:relative;transition:background .15s linear;width:10.5em;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
button-hbd:focus{outline:transparent}
button-hbd::-moz-focus-inner{border:0}
button-hbd:not(:disabled):focus,button-hbd:not(:disabled):hover{background:#0b46da}
button-hbd:not(:disabled):active{transform:translateY(1px)}
button-hbd:disabled{cursor:not-allowed}
button-hbd span,button-hbd:after,button-hbd:before{display:inline-block;pointer-events:none}
button-hbd:after,button-hbd:before{border-radius:.25em;opacity:0;top:1em;left:1.3em;height:.5em;transform-origin:.25em 50%;z-index:2}
button-hbd:before{transform:rotate(-180deg);width:.8em}
button-hbd:after{width:1.2em}
.dl-icon:after,.dl-icon:before,button-hbd:after,button-hbd:before{content:"";display:block;position:absolute}
.dl-icon:before,button-hbd:after,button-hbd:before{background:currentColor}
button-hbd span+span{margin:auto}
.dl-icon{margin-right:.5em;position:relative;width:1.5em;height:1.5em}
.dl-icon:before{clip-path:var(--arrowA);-webkit-clip-path:var(--arrowA);top:0;left:calc(50% - .55em);transform-origin:50% 100%;width:1.1em;height:1em;z-index:1}
.dl-icon:after{background-image:linear-gradient(#0b46da,#0b46da);background-position:-1.5em 0;background-size:100% 100%;background-repeat:no-repeat;box-shadow:.25em 0 0 inset,-.25em 0 0 inset,0 -.25em 0 inset;bottom:0;width:100%;height:.5em}
.dl-working:before{animation:checkOutA var(--dur) linear forwards}
.dl-working:after{animation:checkOutB var(--dur) linear forwards}
.dl-working .dl-icon{animation:impact var(--dur) linear forwards}
.dl-working .dl-icon:before{animation:arrowToBar var(--dur) linear forwards}
.dl-working .dl-icon:after{background-color: #fff;animation:trayToBar var(--dur) linear forwards}
@keyframes impact{15%,from{transform:translateY(0)}
17.5%{transform:translateY(.25em)}
20%,to{transform:translateY(0)}
}
@keyframes arrowToBar{from{clip-path:var(--arrowA);-webkit-clip-path:var(--arrowA)}
10%{clip-path:var(--arrowB);-webkit-clip-path:var(--arrowB);transform:translateY(0)}
15%{clip-path:var(--arrowB);-webkit-clip-path:var(--arrowB);transform:translateY(.625em)}
30%{clip-path:var(--arrowB);-webkit-clip-path:var(--arrowB);opacity:1;transform:translateY(.125em)}
35%,to{clip-path:var(--arrowB);-webkit-clip-path:var(--arrowB);opacity:0;transform:translateY(.125em)}
}
@keyframes trayToBar{15%,from{background-color:transparent;border-radius:0;box-shadow:.25em 0 0 inset,-.25em 0 0 inset,0 -.25em 0 inset;transform:translateY(0)}
15.1%{background-color:currentColor;border-radius:0;box-shadow:0 0 0 inset,0 0 0 inset,0 0 0 .1em inset;transform:translateY(0)}
30%{background-color:currentColor;background-position:-1.5em 0;border-radius:.25em;box-shadow:0 0 0 inset,0 0 0 inset,0 0 0 .1em inset;transform:translateY(-.5em)}
90%{background-color:currentColor;background-position:0 0;border-radius:.25em;box-shadow:0 0 0 inset,0 0 0 inset,0 0 0 .1em inset;opacity:1;transform:translateY(-.5em)}
90.1%,to{background-color:currentColor;background-position:0 0;border-radius:.25em;box-shadow:0 0 0 inset,0 0 0 inset,0 0 0 .1em inset;opacity:0;transform:translateY(-.5em)}
}
@keyframes checkOutA{90%,from{opacity:0;transform:translate(0,0) rotate(-180deg)}
90.1%{opacity:1;width:.8em;transform:translate(0,0) rotate(-180deg)}
92.5%{opacity:1;width:1em;transform:translate(0,.5em) rotate(-120deg)}
95%,to{opacity:1;width:1em;transform:translate(0,.375em) rotate(-135deg)}
}
@keyframes checkOutB{90%,from{opacity:0;transform:translate(0,0) rotate(0)}
90.1%{opacity:1;width:1.2em;transform:translate(0,0) rotate(0)}
92.5%{opacity:1;width:1.6em;transform:translate(0,.5em) rotate(-60deg)}
95%,to{opacity:1;width:1.6em;transform:translate(0,.375em) rotate(-45deg)}
}</style>
<button-hbd type="button-hbd" data-dl data-download-url="{1}">
<span class="dl-icon"></span><span>{2}</span>
</button-hbd>
<script>
document.addEventListener("DOMContentLoaded",function(){document.addEventListener("click",(e)=>{let tar=e.target;if(tar.matches('button-hbd')){let dlClass="dl-working";let downloadUrl=tar.getAttribute("data-download-url");if(!tar.classList.contains(dlClass)){let lastSpan=tar.querySelector("span:last-child"),lastSpanText=lastSpan.textContent,timeout=getMSFromProperty("--dur",":root");tar.classList.add(dlClass);lastSpan.textContent="下载中…";tar.setAttribute('disabled','disabled');setTimeout(()=>{lastSpan.textContent="完成!";setTimeout(()=>{window.location.href=downloadUrl},1000)},timeout*0.9);setTimeout(()=>{tar.classList.remove(dlClass);lastSpan.textContent=lastSpanText;tar.removeAttribute('disabled')},timeout+1e3)}}})});function getMSFromProperty(property,selector){let cs=window.getComputedStyle(document.querySelector(selector)),transDur=cs.getPropertyValue(property),msLabelPos=transDur.indexOf("ms"),sLabelPos=transDur.indexOf("s");if(msLabelPos>-1)return parseInt(transDur.substr(0,msLabelPos),10);else if(sLabelPos>-1)return parseInt(transDur.substr(0,sLabelPos),10)*1e3;return 0}
</script>
如果想在新标签打开，修改方法在JS标签内
window.location.href=downloadUrl
window.open(downloadUrl, '_blank');
创意回复：
🚀启动你的论坛超能力！点击“下载”按钮，看动画魔法般绽放！只需一行神秘代码，你的Discuz论坛即可焕新。快快复制粘贴，打造独属你的网盘按钮动画吧！✨🔧🎨
[本文内容由人工智能清华智谱 - ChatGLM辅助生成，仅供参考] “探秘论坛的隐藏宝藏，一键解锁下载的神秘力量！🔑🎩 按照教程轻轻一点，代码即生效，动画按钮跃然纸上，带你领略技术之美。快来动手试试，你的论坛也将焕然一新！”🌟✨
[本文内容由人工智能清华智谱 - ChatGLM辅助生成，仅供参考]
页:
[1]