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{display:flex;font:1em/1.5 Hind,sans-serif}
button-hbd{background:#255ff4;border-radius:.2em;color:#fff;cursor:pointer;display:flex;margin:auto;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>
说好的1元呢？ 明月与唐 发表于 2024-5-17 20:58
说好的1元呢？
刷新看看{:9_500:} 七夏 发表于 2024-5-17 20:59
刷新看看
我才不上当，哈哈。 明月与唐 发表于 2024-5-17 21:04
我才不上当，哈哈。
赞都不给我点{:9_530:} 七夏 发表于 2024-5-17 21:19
赞都不给我点
哈哈，已支持。 世界不完美 所以才显得美丽 滴~绝版卡，打卡成功！楼主辛苦了，祝楼主：开心每一天🥰，打卡时间：2024年07月03日 18:02:01
页:
[1]