HTML+CSS实现科技感加载效果！！附源码！！

yycvip

完整源码

HTML

1. <div class="main-container">  
   
2. <div class="loader">   
   
3. <svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">      
   
4. <defs>        
   
5. <linearGradient id="chipGradient" x1="0" y1="0" x2="0" y2="1">         
   
6. <stop offset="0%" stop-color="#2d2d2d"></stop>         
   
7. <stop offset="100%" stop-color="#0f0f0f"></stop>        
   
8. </linearGradient>
   
9.         <linearGradient id="textGradient" x1="0" y1="0" x2="0" y2="1">         
   
10. <stop offset="0%" stop-color="#eeeeee"></stop>         
    
11. <stop offset="100%" stop-color="#888888"></stop>        
    
12. </linearGradient>
    
13.         <linearGradient id="pinGradient" x1="1" y1="0" x2="0" y2="0">         
    
14. <stop offset="0%" stop-color="#bbbbbb"></stop>         
    
15. <stop offset="50%" stop-color="#888888"></stop>         
    
16. <stop offset="100%" stop-color="#555555"></stop>        
    
17. </linearGradient>      
    
18. </defs>
    
19.       <g id="traces">        
    
20. <path d="M100 100 H200 V210 H326" class="trace-bg"></path>        
    
21. <path d="M100 100 H200 V210 H326" class="trace-flow purple"></path>
    
22.         <path d="M80 180 H180 V230 H326" class="trace-bg"></path>        
    
23. <path d="M80 180 H180 V230 H326" class="trace-flow blue"></path>
    
24.         <path d="M60 260 H150 V250 H326" class="trace-bg"></path>        
    
25. <path d="M60 260 H150 V250 H326" class="trace-flow yellow"></path>
    
26.         <path d="M100 350 H200 V270 H326" class="trace-bg"></path>        
    
27. <path d="M100 350 H200 V270 H326" class="trace-flow green"></path>
    
28.         <path d="M700 90 H560 V210 H474" class="trace-bg"></path>        
    
29. <path d="M700 90 H560 V210 H474" class="trace-flow blue"></path>
    
30.         <path d="M740 160 H580 V230 H474" class="trace-bg"></path>        
    
31. <path d="M740 160 H580 V230 H474" class="trace-flow green"></path>
    
32.         <path d="M720 250 H590 V250 H474" class="trace-bg"></path>        
    
33. <path d="M720 250 H590 V250 H474" class="trace-flow red"></path>
    
34.         <path d="M680 340 H570 V270 H474" class="trace-bg"></path>        
    
35. <path d="M680 340 H570 V270 H474" class="trace-flow yellow"></path>      
    
36. </g>
    
37.       <rect        
    
38. x="330"        
    
39. y="190"        
    
40. width="140"        
    
41. height="100"        
    
42. rx="20"        
    
43. ry="20"        
    
44. fill="url(#chipGradient)"        
    
45. stroke="#222"        
    
46. stroke-width="3"        
    
47. filter="drop-shadow(0 0 6px rgba(0,0,0,0.8))"
    
48.       ></rect>
    
49.       <g>        
    
50. <rect         
    
51. x="322"         
    
52. y="205"         
    
53. width="8"         
    
54. height="10"         
    
55. fill="url(#pinGradient)"         
    
56. rx="2"
    
57.         ></rect>        
    
58. <rect         
    
59. x="322"         
    
60. y="225"         
    
61. width="8"         
    
62. height="10"         
    
63. fill="url(#pinGradient)"         
    
64. rx="2"
    
65.         ></rect>        
    
66. <rect         
    
67. x="322"         
    
68. y="245"         
    
69. width="8"         
    
70. height="10"         
    
71. fill="url(#pinGradient)"         
    
72. rx="2"
    
73.         ></rect>        
    
74. <rect         
    
75. x="322"         
    
76. y="265"         
    
77. width="8"         
    
78. height="10"         
    
79. fill="url(#pinGradient)"         
    
80. rx="2"
    
81.         ></rect>      
    
82. </g>
    
83.       <g>        
    
84. <rect         
    
85. x="470"         
    
86. y="205"         
    
87. width="8"         
    
88. height="10"         
    
89. fill="url(#pinGradient)"         
    
90. rx="2"
    
91.         ></rect>        
    
92. <rect         
    
93. x="470"         
    
94. y="225"         
    
95. width="8"         
    
96. height="10"         
    
97. fill="url(#pinGradient)"         
    
98. rx="2"
    
99.         ></rect>        
    
100. <rect         
     
101. x="470"         
     
102. y="245"         
     
103. width="8"         
     
104. height="10"         
     
105. fill="url(#pinGradient)"         
     
106. rx="2"
     
107.         ></rect>        
     
108. <rect         
     
109. x="470"         
     
110. y="265"         
     
111. width="8"         
     
112. height="10"         
     
113. fill="url(#pinGradient)"         
     
114. rx="2"
     
115.         ></rect>      
     
116. </g>
     
117.       <text        
     
118. x="400"        
     
119. y="240"        
     
120. font-family="Arial, sans-serif"        
     
121. font-size="22"        
     
122. fill="url(#textGradient)"        
     
123. text-anchor="middle"        
     
124. alignment-baseline="middle"
     
125.       >
     
126.         Loading      
     
127. </text>
     
128.       <circle cx="100" cy="100" r="5" fill="black"></circle>      
     
129. <circle cx="80" cy="180" r="5" fill="black"></circle>      
     
130. <circle cx="60" cy="260" r="5" fill="black"></circle>      
     
131. <circle cx="100" cy="350" r="5" fill="black"></circle>
     
132.       <circle cx="700" cy="90" r="5" fill="black"></circle>      
     
133. <circle cx="740" cy="160" r="5" fill="black"></circle>      
     
134. <circle cx="720" cy="250" r="5" fill="black"></circle>      
     
135. <circle cx="680" cy="340" r="5" fill="black"></circle>   
     
136. </svg>  
     
137. </div>
     
138. </div>

复制代码

style.CSS

1. .main-container {  
   
2. display: flex;  
   
3. justify-content: center;  
   
4. align-items: center;  
   
5. height: 100%;  
   
6. width: 100%;
   
7. }
   
8. .loader {  
   
9. width: 100%;
   
10. }
    
11. .trace-bg {  
    
12. stroke: #333;  
    
13. stroke-width: 1.8;  
    
14. fill: none;
    
15. }
    
16. .trace-flow {  
    
17. stroke-width: 1.8;  
    
18. fill: none;  
    
19. stroke-dasharray: 40 400;  
    
20. stroke-dashoffset: 438;  
    
21. filter: drop-shadow(0 0 6px currentColor);  
    
22. animation: flow 3s cubic-bezier(0.5, 0, 0.9, 1) infinite;
    
23. }
    
24. .yellow {  
    
25. stroke: #ffea00;  
    
26. color: #ffea00;
    
27. }
    
28. .blue {  
    
29. stroke: #00ccff;  
    
30. color: #00ccff;
    
31. }
    
32. .green {  
    
33. stroke: #00ff15;  
    
34. color: #00ff15;
    
35. }
    
36. .purple {  
    
37. stroke: #9900ff;  
    
38. color: #9900ff;
    
39. }
    
40. .red {  
    
41. stroke: #ff3300;  
    
42. color: #ff3300;
    
43. }
    
44. @keyframes flow {  
    
45. to {   
    
46. stroke-dashoffset: 0;
    
47.   }
    
48. }
    
49. /* Čip */
    
50. .chip-body {
    
51.   rx: 20;
    
52.   ry: 20;
    
53. }
    
54. /* Text uvnitř čipu */
    
55. .chip-text {  
    
56. font-weight: bold;  
    
57. letter-spacing: 1px;
    
58. }
    
59. /* Piny */
    
60. .chip-pin {  
    
61. stroke: #444;  
    
62. stroke-width: 0.5;  
    
63. filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
    
64. }

复制代码