HTML+CSS+JS实现“个人资料卡片用户界面”

yycvip

在这个片段中，悬停效果只是众多功能中的一部分，但它极具吸引力。个人资料卡底部的标签设计巧妙，允许你在较小的设计元素中放入大量内容，玻璃态的使用也提升了视觉效果。

HTML

1. <div class="card" data-state="#about">
   
2.   <div class="card-header">
   
3.     <div class="card-cover" style="background-image: url('https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80')"></div>
   
4.     <img class="card-avatar" src="https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="avatar" />
   
5.     <h1 class="card-fullname">William Rocheald</h1>
   
6.     <h2 class="card-jobtitle">UI Developer</h2>
   
7.   </div>
   
8.   <div class="card-main">
   
9.     <div class="card-section is-active" id="about">
   
10.       <div class="card-content">
    
11.         <div class="card-subtitle">ABOUT</div>
    
12.         <p class="card-desc">Whatever tattooed stumptown art party sriracha gentrify hashtag intelligentsia readymade schlitz brooklyn disrupt.
    
13.         </p>
    
14.       </div>
    
15.       <div class="card-social">
    
16.         <a href="#"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    
17.             <path d="M15.997 3.985h2.191V.169C17.81.117 16.51 0 14.996 0c-3.159 0-5.323 1.987-5.323 5.639V9H6.187v4.266h3.486V24h4.274V13.267h3.345l.531-4.266h-3.877V6.062c.001-1.233.333-2.077 2.051-2.077z" /></svg></a>
    
18.         <a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    
19.             <path d="M512 97.248c-19.04 8.352-39.328 13.888-60.48 16.576 21.76-12.992 38.368-33.408 46.176-58.016-20.288 12.096-42.688 20.64-66.56 25.408C411.872 60.704 384.416 48 354.464 48c-58.112 0-104.896 47.168-104.896 104.992 0 8.32.704 16.32 2.432 23.936-87.264-4.256-164.48-46.08-216.352-109.792-9.056 15.712-14.368 33.696-14.368 53.056 0 36.352 18.72 68.576 46.624 87.232-16.864-.32-33.408-5.216-47.424-12.928v1.152c0 51.008 36.384 93.376 84.096 103.136-8.544 2.336-17.856 3.456-27.52 3.456-6.72 0-13.504-.384-19.872-1.792 13.6 41.568 52.192 72.128 98.08 73.12-35.712 27.936-81.056 44.768-130.144 44.768-8.608 0-16.864-.384-25.12-1.44C46.496 446.88 101.6 464 161.024 464c193.152 0 298.752-160 298.752-298.688 0-4.64-.16-9.12-.384-13.568 20.832-14.784 38.336-33.248 52.608-54.496z" /></svg></a>
    
20.         <a href="#"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    
21.             <path d="M301 256c0 24.852-20.148 45-45 45s-45-20.148-45-45 20.148-45 45-45 45 20.148 45 45zm0 0" />
    
22.             <path d="M332 120H180c-33.086 0-60 26.914-60 60v152c0 33.086 26.914 60 60 60h152c33.086 0 60-26.914 60-60V180c0-33.086-26.914-60-60-60zm-76 211c-41.355 0-75-33.645-75-75s33.645-75 75-75 75 33.645 75 75-33.645 75-75 75zm86-146c-8.285 0-15-6.715-15-15s6.715-15 15-15 15 6.715 15 15-6.715 15-15 15zm0 0" />
    
23.             <path d="M377 0H135C60.562 0 0 60.563 0 135v242c0 74.438 60.563 135 135 135h242c74.438 0 135-60.563 135-135V135C512 60.562 451.437 0 377 0zm45 332c0 49.625-40.375 90-90 90H180c-49.625 0-90-40.375-90-90V180c0-49.625 40.375-90 90-90h152c49.625 0 90 40.375 90 90zm0 0" /></svg></a>
    
24.         <a href="#"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    
25.             <path d="M23.994 24v-.001H24v-8.802c0-4.306-.927-7.623-5.961-7.623-2.42 0-4.044 1.328-4.707 2.587h-.07V7.976H8.489v16.023h4.97v-7.934c0-2.089.396-4.109 2.983-4.109 2.549 0 2.587 2.384 2.587 4.243V24zM.396 7.977h4.976V24H.396zM2.882 0C1.291 0 0 1.291 0 2.882s1.291 2.909 2.882 2.909 2.882-1.318 2.882-2.909A2.884 2.884 0 002.882 0z" /></svg></a>
    
26.       </div>
    
27.     </div>
    
28.     <div class="card-section" id="experience">
    
29.       <div class="card-content">
    
30.         <div class="card-subtitle">WORK EXPERIENCE</div>
    
31.         <div class="card-timeline">
    
32.           <div class="card-item" data-year="2014">
    
33.             <div class="card-item-title">Front-end Developer at <span>JotForm</span></div>
    
34.             <div class="card-item-desc">Disrupt stumptown retro everyday carry unicorn.</div>
    
35.           </div>
    
36.           <div class="card-item" data-year="2016">
    
37.             <div class="card-item-title">UI Developer at <span>GitHub</span></div>
    
38.             <div class="card-item-desc">Developed new conversion funnels and disrupt.</div>
    
39.           </div>
    
40.           <div class="card-item" data-year="2018">
    
41.             <div class="card-item-title">Illustrator at <span>Google</span></div>
    
42.             <div class="card-item-desc">Onboarding illustrations for App.</div>
    
43.           </div>
    
44.           <div class="card-item" data-year="2020">
    
45.             <div class="card-item-title">Full-Stack Developer at <span>CodePen</span></div>
    
46.             <div class="card-item-desc">Responsible for the encomposing brand expreience.</div>
    
47.           </div>
    
48.         </div>
    
49.       </div>
    
50.     </div>
    
51.     <div class="card-section" id="contact">
    
52.       <div class="card-content">
    
53.         <div class="card-subtitle">CONTACT</div>
    
54.         <div class="card-contact-wrapper">
    
55.           <div class="card-contact">
    
56.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    
57.               <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
    
58.               <circle cx="12" cy="10" r="3" /></svg>
    
59.             Algonquin Rd, Three Oaks Vintage, MI, 49128
    
60.           </div>
    
61.           <div class="card-contact">
    
62.             <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    
63.               <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" /></svg>(269) 756-9809</div>
    
64.           <div class="card-contact">
    
65.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    
66.               <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
    
67.               <path d="M22 6l-10 7L2 6" /></svg>
    
68.             william@rocheald.com
    
69.           </div>
    
70.           <button class="contact-me">WORK TOGETHER</button>
    
71.         </div>
    
72.       </div>
    
73.     </div>
    
74.     <div class="card-buttons">
    
75.       <button data-section="#about" class="is-active">ABOUT</button>
    
76.       <button data-section="#experience">EXPERIENCE</button>
    
77.       <button data-section="#contact">CONTACT</button>
    
78.     </div>
    
79.   </div>
    
80. </div>

复制代码

1. @import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap");
   
2. 
   
3. * {
   
4.   box-sizing: border-box;
   
5. }
   
6. body {
   
7.   color: #2b2c48;
   
8.   font-family: "Jost", sans-serif;
   
9.   background-image: url(https://images.unsplash.com/photo-1566738780863-f9608f88f3a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2378&q=80);
   
10. 
    
11.   background-repeat: no-repeat;
    
12.   background-size: cover;
    
13.   background-position: center;
    
14.   background-attachment: fixed;
    
15.   min-height: 100vh;
    
16.   display: flex;
    
17.   flex-wrap: wrap;
    
18.   padding: 20px;
    
19. }
    
20. 
    
21. .card {
    
22.   max-width: 340px;
    
23.   margin: auto;
    
24.   overflow-y: auto;
    
25.   position: relative;
    
26.   z-index: 1;
    
27.   overflow-x: hidden;
    
28.   background-color: rgba(255, 255, 255, 1);
    
29.   display: flex;
    
30.   transition: 0.3s;
    
31.   flex-direction: column;
    
32.   border-radius: 10px;
    
33.   box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
    
34. }
    
35. 
    
36. .card[data-state="#about"] {
    
37.   height: 450px;
    
38.   .card-main {
    
39.     padding-top: 0;
    
40.   }
    
41. }
    
42. 
    
43. .card[data-state="#contact"] {
    
44.   height: 430px;
    
45. }
    
46. 
    
47. .card[data-state="#experience"] {
    
48.   height: 550px;
    
49. }
    
50. 
    
51. .card.is-active {
    
52.   .card-header {
    
53.     height: 80px;
    
54.   }
    
55. 
    
56.   .card-cover {
    
57.     height: 100px;
    
58.     top: -50px;
    
59.   }
    
60. 
    
61.   .card-avatar {
    
62.     transform: none;
    
63.     left: 20px;
    
64.     width: 50px;
    
65.     height: 50px;
    
66.     bottom: 10px;
    
67.   }
    
68. 
    
69.   .card-fullname,
    
70.   .card-jobtitle {
    
71.     left: 86px;
    
72.     transform: none;
    
73.   }
    
74. 
    
75.   .card-fullname {
    
76.     bottom: 18px;
    
77.     font-size: 19px;
    
78.   }
    
79. 
    
80.   .card-jobtitle {
    
81.     bottom: 16px;
    
82.     letter-spacing: 1px;
    
83.     font-size: 10px;
    
84.   }
    
85. }
    
86. 
    
87. .card-header {
    
88.   position: relative;
    
89.   display: flex;
    
90.   height: 200px;
    
91.   flex-shrink: 0;
    
92.   width: 100%;
    
93.   transition: 0.3s;
    
94. 
    
95.   * {
    
96.     transition: 0.3s;
    
97.   }
    
98. }
    
99. 
    
100. .card-cover {
     
101.   width: 100%;
     
102.   height: 100%;
     
103.   position: absolute;
     
104.   height: 160px;
     
105.   top: -20%;
     
106.   left: 0;
     
107.   will-change: top;
     
108.   background-size: cover;
     
109.   background-position: center;
     
110.   filter: blur(30px);
     
111.   transform: scale(1.2);
     
112.   transition: 0.5s;
     
113. }
     
114. 
     
115. .card-avatar {
     
116.   width: 100px;
     
117.   height: 100px;
     
118.   box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
     
119.   border-radius: 50%;
     
120.   object-position: center;
     
121.   object-fit: cover;
     
122.   position: absolute;
     
123.   bottom: 0;
     
124.   left: 50%;
     
125.   transform: translateX(-50%) translateY(-64px);
     
126. }
     
127. 
     
128. .card-fullname {
     
129.   position: absolute;
     
130.   bottom: 0;
     
131.   font-size: 22px;
     
132.   font-weight: 700;
     
133.   text-align: center;
     
134.   white-space: nowrap;
     
135.   transform: translateY(-10px) translateX(-50%);
     
136.   left: 50%;
     
137. }
     
138. 
     
139. .card-jobtitle {
     
140.   position: absolute;
     
141.   bottom: 0;
     
142.   font-size: 11px;
     
143.   white-space: nowrap;
     
144.   font-weight: 500;
     
145.   opacity: 0.7;
     
146.   text-transform: uppercase;
     
147.   letter-spacing: 1.5px;
     
148.   margin: 0;
     
149.   left: 50%;
     
150.   transform: translateX(-50%) translateY(-7px);
     
151. }
     
152. 
     
153. .card-main {
     
154.   position: relative;
     
155.   flex: 1;
     
156.   display: flex;
     
157.   padding-top: 10px;
     
158.   flex-direction: column;
     
159. }
     
160. 
     
161. .card-subtitle {
     
162.   font-weight: 700;
     
163.   font-size: 13px;
     
164.   margin-bottom: 8px;
     
165. }
     
166. 
     
167. .card-content {
     
168.   padding: 20px;
     
169. }
     
170. 
     
171. .card-desc {
     
172.   line-height: 1.6;
     
173.   color: #636b6f;
     
174.   font-size: 14px;
     
175.   margin: 0;
     
176.   font-weight: 400;
     
177.   font-family: "DM Sans", sans-serif;
     
178. }
     
179. 
     
180. .card-social {
     
181.   display: flex;
     
182.   align-items: center;
     
183.   padding: 0 20px;
     
184.   margin-bottom: 30px;
     
185.   svg {
     
186.     fill: rgb(165, 181, 206);
     
187.     width: 16px;
     
188.     display: block;
     
189.     transition: 0.3s;
     
190.   }
     
191.   a {
     
192.     color: #8797a1;
     
193.     height: 32px;
     
194.     width: 32px;
     
195.     border-radius: 50%;
     
196.     display: inline-flex;
     
197.     align-items: center;
     
198.     justify-content: center;
     
199.     transition: 0.3s;
     
200.     background-color: rgba(93, 133, 193, 0.05);
     
201.     border-radius: 50%;
     
202.     margin-right: 10px;
     
203. 
     
204.     &:hover {
     
205.       svg {
     
206.         fill: darken(rgb(165, 181, 206), 20%);
     
207.       }
     
208.     }
     
209. 
     
210.     &:last-child {
     
211.       margin-right: 0;
     
212.     }
     
213.   }
     
214. }
     
215. 
     
216. .card-buttons {
     
217.   display: flex;
     
218.   background-color: #fff;
     
219.   margin-top: auto;
     
220.   position: sticky;
     
221.   bottom: 0;
     
222.   left: 0;
     
223. 
     
224.   button {
     
225.     flex: 1 1 auto;
     
226.     user-select: none;
     
227.     background: 0;
     
228.     font-size: 13px;
     
229.     border: 0;
     
230.     padding: 15px 5px;
     
231.     cursor: pointer;
     
232.     color: #5c5c6d;
     
233.     transition: 0.3s;
     
234.     font-family: "Jost", sans-serif;
     
235.     font-weight: 500;
     
236.     outline: 0;
     
237.     border-bottom: 3px solid transparent;
     
238. 
     
239.     &.is-active,
     
240.     &:hover {
     
241.       color: #2b2c48;
     
242.       border-bottom: 3px solid #8a84ff;
     
243.       background: linear-gradient(
     
244.         to bottom,
     
245.         rgba(127, 199, 231, 0) 0%,
     
246.         rgba(207, 204, 255, 0.2) 44%,
     
247.         rgba(211, 226, 255, 0.4) 100%
     
248.       );
     
249.     }
     
250.   }
     
251. }
     
252. 
     
253. .card-section {
     
254.   display: none;
     
255.   &.is-active {
     
256.     display: block;
     
257.     animation: fadeIn 0.6s both;
     
258.   }
     
259. }
     
260. 
     
261. @keyframes fadeIn {
     
262.   0% {
     
263.     opacity: 0;
     
264.     transform: translatey(40px);
     
265.   }
     
266.   100% {
     
267.     opacity: 1;
     
268.   }
     
269. }
     
270. 
     
271. .card-timeline {
     
272.   margin-top: 30px;
     
273.   position: relative;
     
274.   &:after {
     
275.     background: linear-gradient(
     
276.       to top,
     
277.       rgba(134, 214, 243, 0) 0%,
     
278.       rgba(81, 106, 204, 1) 100%
     
279.     );
     
280.     content: "";
     
281.     left: 42px;
     
282.     width: 2px;
     
283.     top: 0;
     
284.     height: 100%;
     
285.     position: absolute;
     
286.     content: "";
     
287.   }
     
288. }
     
289. 
     
290. .card-item {
     
291.   position: relative;
     
292.   padding-left: 60px;
     
293.   padding-right: 20px;
     
294.   padding-bottom: 30px;
     
295.   z-index: 1;
     
296.   &:last-child {
     
297.     padding-bottom: 5px;
     
298.   }
     
299. 
     
300.   &:after {
     
301.     content: attr(data-year);
     
302.     width: 10px;
     
303.     position: absolute;
     
304.     top: 0;
     
305.     left: 37px;
     
306.     width: 8px;
     
307.     height: 8px;
     
308.     line-height: 0.6;
     
309.     border: 2px solid #fff;
     
310.     font-size: 11px;
     
311.     text-indent: -35px;
     
312.     border-radius: 50%;
     
313.     color: rgba(#868686, 0.7);
     
314.     background: linear-gradient(
     
315.       to bottom,
     
316.       lighten(#516acc, 20%) 0%,
     
317.       #516acc 100%
     
318.     );
     
319.   }
     
320. }
     
321. 
     
322. .card-item-title {
     
323.   font-weight: 500;
     
324.   font-size: 14px;
     
325.   margin-bottom: 5px;
     
326. }
     
327. 
     
328. .card-item-desc {
     
329.   font-size: 13px;
     
330.   color: #6f6f7b;
     
331.   line-height: 1.5;
     
332.   font-family: "DM Sans", sans-serif;
     
333. }
     
334. 
     
335. .card-contact-wrapper {
     
336.   margin-top: 20px;
     
337. }
     
338. 
     
339. .card-contact {
     
340.   display: flex;
     
341.   align-items: center;
     
342.   font-size: 13px;
     
343.   color: #6f6f7b;
     
344.   font-family: "DM Sans", sans-serif;
     
345.   line-height: 1.6;
     
346.   cursor: pointer;
     
347. 
     
348.   & + & {
     
349.     margin-top: 16px;
     
350.   }
     
351. 
     
352.   svg {
     
353.     flex-shrink: 0;
     
354.     width: 30px;
     
355.     min-height: 34px;
     
356.     margin-right: 12px;
     
357.     transition: 0.3s;
     
358.     padding-right: 12px;
     
359.     border-right: 1px solid #dfe2ec;
     
360.   }
     
361. }
     
362. 
     
363. .contact-me {
     
364.   border: 0;
     
365.   outline: none;
     
366.   background: linear-gradient(
     
367.     to right,
     
368.     rgba(83, 200, 239, 0.8) 0%,
     
369.     rgba(81, 106, 204, 0.8) 96%
     
370.   );
     
371.   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
     
372.   color: #fff;
     
373.   padding: 12px 16px;
     
374.   width: 100%;
     
375.   border-radius: 5px;
     
376.   margin-top: 25px;
     
377.   cursor: pointer;
     
378.   font-size: 14px;
     
379.   font-weight: 500;
     
380.   font-family: "Jost", sans-serif;
     
381.   transition: 0.3s;
     
382. }
     

复制代码

1. const buttons = document.querySelectorAll(".card-buttons button");
   
2. const sections = document.querySelectorAll(".card-section");
   
3. const card = document.querySelector(".card");
   
4. 
   
5. const handleButtonClick = (e) => {
   
6.   const targetSection = e.target.getAttribute("data-section");
   
7.   const section = document.querySelector(targetSection);
   
8.   targetSection !== "#about"
   
9.     ? card.classList.add("is-active")
   
10.     : card.classList.remove("is-active");
    
11.   card.setAttribute("data-state", targetSection);
    
12.   sections.forEach((s) => s.classList.remove("is-active"));
    
13.   buttons.forEach((b) => b.classList.remove("is-active"));
    
14.   e.target.classList.add("is-active");
    
15.   section.classList.add("is-active");
    
16. };
    
17. 
    
18. buttons.forEach((btn) => {
    
19.   btn.addEventListener("click", handleButtonClick);
    
20. });

复制代码