简洁精美的网站附件下载代码

竹林

很漂亮的一个网站文件下载代码，简洁方便，需要的可以自行下载测试。

源码下载

https://pan.quark.cn/s/76dce3a7db03

1. <style>
   
2. .i-down-box {
   
3.     width: 100%;
   
4.     display: flex;
   
5.     align-items: center;
   
6.     justify-content: center;
   
7.     flex-wrap: wrap;
   
8. }
   
9. .idown-btn {
   
10.     letter-spacing: 0.1em;
    
11.     cursor: pointer;
    
12.     font-size: 14px;
    
13.     font-weight: 700;
    
14.     line-height: 45px;
    
15.     width: 23%;
    
16.     max-width: 160px;
    
17.     text-decoration: none;
    
18.     text-transform: uppercase;
    
19.     margin: 5px;
    
20. }
    
21. .idown-btn:hover {
    
22.     text-decoration: none;
    
23. }
    
24. .i-idown-btn {
    
25.     --uismLinkDisplay: var(--smLinkDisplay, inline-flex);
    
26.     display: var(--uismLinkDisplay);
    
27.     color: #000;
    
28.     border: 2px solid #000;
    
29.     border-radius: 5px;
    
30.     position: relative;
    
31.     transition-duration: 0.4s;
    
32.     overflow: hidden;
    
33.     text-align: center;
    
34. }
    
35. .i-idown-btn::before,
    
36. .i-idown-btn span {
    
37.     margin: 0 auto;
    
38.     transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    
39.     transition-duration: 0.4s;
    
40. }
    
41. .i-idown-btn:hover {
    
42.     background-color: #000;
    
43. }
    
44. .i-idown-btn:hover span {
    
45.     -webkit-transform: translateY(-400%) scale(-0.1, 20);
    
46.     transform: translateY(-400%) scale(-0.1, 20);
    
47. }
    
48. .i-idown-btn::before {
    
49.     content: attr(data-sm-link-text);
    
50.     color: #FFF;
    
51.     position: absolute;
    
52.     left: 0;
    
53.     right: 0;
    
54.     margin: auto;
    
55.     -webkit-transform: translateY(500%) scale(-0.1, 20);
    
56.     transform: translateY(500%) scale(-0.1, 20);
    
57. }
    
58. .i-idown-btn:hover::before {
    
59.     letter-spacing: 0.05em;
    
60.     -webkit-transform: translateY(0) scale(1, 1);
    
61.     transform: translateY(0) scale(1, 1);
    
62. }
    
63. @media screen and (max-width: 1198px) {
    
64.     .idown-btn {
    
65.         width: 45%;
    
66.     }
    
67. }
    
68. </style>
    
69. 下载地址:
    
70. <div class="i-down-box">
    
71.     <!-- 替换#为实际的下载链接 -->
    
72.     <a href="https://foxccs.cn" class="idown-btn i-idown-btn" data-sm-link-text="点击下载" target="_blank"><span>本地下载</span></a>
    
73.     </div>

复制代码